perf: trigger animation

vueComponent · Apr 21, 2020 · bf52f73 · bf52f73
1 parent f9b233f
commit bf52f73
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 26 deletions.
diff --git a/components/_util/ContainerRender.jsx b/components/_util/ContainerRender.jsx
@@ -42,20 +42,22 @@ export default {
     renderComponent(props = {}, ready) {
       const { visible, forceRender, getContainer, parent } = this;
       const self = this;
-      if (visible || parent.$refs._component || forceRender) {
+      if (visible || parent._component || parent.$refs._component || forceRender) {
         let el = this.componentEl;
         if (!this.container) {
           this.container = getContainer();
           el = document.createElement('div');
           this.componentEl = el;
           this.container.appendChild(el);
         }
+        // self.getComponent 不要放在 render 中，会因为响应式数据问题导致，多次触发 render
+        const com = { component: self.getComponent(props) };
         if (!this._component) {
           this._component = new this.$root.constructor({
             el,
             parent: self,
             data: {
-              comProps: props,
+              _com: com,
             },
             mounted() {
               this.$nextTick(() => {
@@ -72,17 +74,16 @@ export default {
               });
             },
             methods: {
-              forceRender(p) {
-                this.comProps = p;
-                this.$forceUpdate();
+              setComponent(_com) {
+                this.$data._com = _com;
               },
             },
             render() {
-              return self.getComponent(this.comProps);
+              return this.$data._com.component;
             },
           });
         } else {
-          this._component.forceRender(props);
+          this._component.setComponent(com);
         }
       }
     },

diff --git a/components/vc-select/DropdownMenu.jsx b/components/vc-select/DropdownMenu.jsx
@@ -32,6 +32,10 @@ export default {
     visible(val) {
       if (!val) {
         this.lastVisible = val;
+      } else {
+        this.$nextTick(() => {
+          this.scrollActiveItemToView();
+        });
       }
     },
   },
@@ -50,11 +54,11 @@ export default {
   },
   updated() {
     const props = this.$props;
-    if (!this.prevVisible && props.visible) {
-      this.$nextTick(() => {
-        this.scrollActiveItemToView();
-      });
-    }
+    // if (!this.prevVisible && props.visible) {
+    //   this.$nextTick(() => {
+    //     this.scrollActiveItemToView();
+    //   });
+    // }
     this.lastVisible = props.visible;
     this.lastInputValue = props.inputValue;
     this.prevVisible = this.visible;

diff --git a/components/vc-tree-select/src/Select.jsx b/components/vc-tree-select/src/Select.jsx
@@ -828,11 +828,10 @@ const Select = {
       // When set open success and single mode,
       // we will reset the input content.
       if (open && !multiple && !treeCheckable && _searchValue) {
-        // 动画会有闪动，该特性先注释
-        // this.setUncontrolledState({
-        //   _searchValue: '',
-        //   _filteredTreeNodes: null,
-        // });
+        this.setUncontrolledState({
+          _searchValue: '',
+          _filteredTreeNodes: null,
+        });
       }
       this.setOpenState(open, true);
     },

diff --git a/components/vc-trigger/Popup.jsx b/components/vc-trigger/Popup.jsx
@@ -46,12 +46,14 @@ export default {
       this.setStretchSize();
     });
   },
-  beforeUpdate() {
-    if (this.domEl && this.domEl.rcEndListener) {
-      this.domEl.rcEndListener();
-      this.domEl = null;
-    }
-  },
+  // 如添加会导致动画失效，如放开会导致快速输入时闪动 https://github.com/vueComponent/ant-design-vue/issues/1327，
+  // 目前方案是保留动画，闪动问题(动画多次执行)进一步定位
+  // beforeUpdate() {
+  //   if (this.domEl && this.domEl.rcEndListener) {
+  //     this.domEl.rcEndListener();
+  //     this.domEl = null;
+  //   }
+  // },
   updated() {
     this.$nextTick(() => {
       this.setStretchSize();
@@ -207,10 +209,10 @@ export default {
         style: { ...sizeStyle, ...popupStyle, ...this.getZIndexStyle() },
       };
       let transitionProps = {
-        props: Object.assign({
+        props: {
           appear: true,
           css: false,
-        }),
+        },
       };
       const transitionName = getTransitionName();
       let useTransition = !!transitionName;
@@ -227,6 +229,8 @@ export default {
                 this.domEl = el;
                 animate(el, `${transitionName}-enter`, done);
               });
+            } else {
+              done();
             }
           });
         },

diff --git a/components/vc-trigger/Trigger.jsx b/components/vc-trigger/Trigger.jsx
@@ -128,9 +128,10 @@ export default {
       if (this.sPopupVisible !== this.prevPopupVisible) {
         this.afterPopupVisibleChange(this.sPopupVisible);
       }
+      this.prevPopupVisible = this.sPopupVisible;
     };
+    this.renderComponent(null, triggerAfterPopupVisibleChange);
     this.$nextTick(() => {
-      this.renderComponent(null, triggerAfterPopupVisibleChange);
       this.updatedCal();
     });
   },