fix: Auto complete dropdown flickers #1327

vueComponent · Oct 25, 2019 · a4c2a0e · a4c2a0e
1 parent 1208649
commit a4c2a0e
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 12 deletions.
diff --git a/components/_util/css-animation/index.js b/components/_util/css-animation/index.js
@@ -54,7 +54,7 @@ function clearBrowserBugTimeout(node) {
 const cssAnimation = (node, transitionName, endCallback) => {
   const nameIsObj = typeof transitionName === 'object';
   const className = nameIsObj ? transitionName.name : transitionName;
-  const activeClassName = nameIsObj ? transitionName.active : `${transitionName} ${transitionName}-active`;
+  const activeClassName = nameIsObj ? transitionName.active : `${transitionName}-active`;
   let end = endCallback;
   let start;
   let active;
@@ -83,10 +83,7 @@ const cssAnimation = (node, transitionName, endCallback) => {
     clearBrowserBugTimeout(node);
 
     nodeClasses.remove(className);
-    activeClassName.split(' ').forEach((className)=>{
-      nodeClasses.remove(className);
-    });
-    //nodeClasses.remove(activeClassName);
+    nodeClasses.remove(activeClassName);
 
     Event.removeEndEventListener(node, node.rcEndListener);
     node.rcEndListener = null;
@@ -107,10 +104,7 @@ const cssAnimation = (node, transitionName, endCallback) => {
 
   node.rcAnimTimeout = requestAnimationTimeout(() => {
     node.rcAnimTimeout = null;
-    // nodeClasses.add(activeClassName);
-    activeClassName.split(' ').forEach((className)=>{
-      nodeClasses.add(className);
-    });
+    nodeClasses.add(activeClassName);
     if (active) {
       requestAnimationTimeout(active, 0);
     }

diff --git a/components/vc-trigger/Popup.jsx b/components/vc-trigger/Popup.jsx
@@ -45,7 +45,7 @@ export default {
     });
   },
   beforeUpdate() {
-    if(this.domEl && this.domEl.rcEndListener) {
+    if (this.domEl && this.domEl.rcEndListener) {
       this.domEl.rcEndListener();
       this.domEl = null;
     }
@@ -219,7 +219,7 @@ export default {
           // this.$refs.alignInstance.forceAlign();
         },
         enter: (el, done) => {
-          // align updated后执行动画
+          // render 后 vue 会移除通过animate动态添加的 class导致动画闪动，延迟两帧添加动画class，可以进一步定位或者重写 transition 组件
           this.$nextTick(() => {
             if (this.$refs.alignInstance) {
               this.$refs.alignInstance.$nextTick(() => {
@@ -229,8 +229,10 @@ export default {
             }
           });
         },
-        leave: (el, done) => {
+        beforeLeave: () => {
           this.domEl = null;
+        },
+        leave: (el, done) => {
           animate(el, `${transitionName}-leave`, done);
         },
       };