refactor(transition): refactor requestAnimationFrame with selectorQue…

…ry to improve performance fix youzan#3133, fix youzan#3120, fix youzan#2636, fix youzan#3441, fix youzan#3434, fix youzan#3455
rex-zsd · Aug 8, 2020 · df6fedf · df6fedf
1 parent f2bf007
commit df6fedf
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 41 deletions.
diff --git a/packages/common/utils.ts b/packages/common/utils.ts
@@ -38,3 +38,19 @@ export function addUnit(value?: string | number): string | undefined {
   value = String(value);
   return isNumber(value) ? `${value}px` : value;
 }
+
+export function requestAnimationFrame(cb: Function) {
+  const systemInfo = getSystemInfoSync();
+
+  if (systemInfo.platform === 'devtools') {
+    return nextTick(cb);
+  }
+
+  return wx
+    .createSelectorQuery()
+    .selectViewport()
+    .boundingClientRect()
+    .exec(() => {
+      cb();
+    });
+}
diff --git a/packages/mixins/transition.ts b/packages/mixins/transition.ts
@@ -1,4 +1,4 @@
-import { isObj } from '../common/utils';
+import { isObj, requestAnimationFrame } from '../common/utils';
 
 const getClassNames = (name: string) => ({
   enter: `van-${name}-enter van-${name}-enter-active enter-class enter-active-class`,
@@ -7,8 +7,6 @@ const getClassNames = (name: string) => ({
   'leave-to': `van-${name}-leave-to van-${name}-leave-active leave-to-class leave-active-class`,
 });
 
-const nextTick = () => new Promise((resolve) => setTimeout(resolve, 1000 / 30));
-
 export const transition = function (showDefaultValue: boolean) {
   return Behavior({
     properties: {
@@ -53,29 +51,24 @@ export const transition = function (showDefaultValue: boolean) {
         this.status = 'enter';
         this.$emit('before-enter');
 
-        Promise.resolve()
-          .then(nextTick)
-          .then(() => {
-            this.checkStatus('enter');
-            this.$emit('enter');
-
-            this.setData({
-              inited: true,
-              display: true,
-              classes: classNames.enter,
-              currentDuration,
-            });
-          })
-          .then(nextTick)
-          .then(() => {
+        requestAnimationFrame(() => {
+          this.checkStatus('enter');
+          this.$emit('enter');
+
+          this.setData({
+            inited: true,
+            display: true,
+            classes: classNames.enter,
+            currentDuration,
+          });
+
+          requestAnimationFrame(() => {
             this.checkStatus('enter');
             this.transitionEnded = false;
 
-            this.setData({
-              classes: classNames['enter-to'],
-            });
-          })
-          .catch(() => {});
+            this.setData({ classes: classNames['enter-to'] });
+          });
+        });
       },
 
       leave() {
@@ -90,28 +83,23 @@ export const transition = function (showDefaultValue: boolean) {
         this.status = 'leave';
         this.$emit('before-leave');
 
-        Promise.resolve()
-          .then(nextTick)
-          .then(() => {
-            this.checkStatus('leave');
-            this.$emit('leave');
-
-            this.setData({
-              classes: classNames.leave,
-              currentDuration,
-            });
-          })
-          .then(nextTick)
-          .then(() => {
+        requestAnimationFrame(() => {
+          this.checkStatus('leave');
+          this.$emit('leave');
+
+          this.setData({
+            classes: classNames.leave,
+            currentDuration,
+          });
+
+          requestAnimationFrame(() => {
             this.checkStatus('leave');
             this.transitionEnded = false;
             setTimeout(() => this.onTransitionEnd(), currentDuration);
 
-            this.setData({
-              classes: classNames['leave-to'],
-            });
-          })
-          .catch(() => {});
+            this.setData({ classes: classNames['leave-to'] });
+          });
+        });
       },
 
       checkStatus(status: 'enter' | 'leave') {