fix: Auto complete dropdown flickers #1327

Author: tangjinzhou

Diff for: 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}-active`;
+  const activeClassName = nameIsObj ? transitionName.active : `${transitionName} ${transitionName}-active`;
   let end = endCallback;
   let start;
   let active;
@@ -83,7 +83,10 @@ const cssAnimation = (node, transitionName, endCallback) => {
     clearBrowserBugTimeout(node);
 
     nodeClasses.remove(className);
-    nodeClasses.remove(activeClassName);
+    activeClassName.split(' ').forEach((className)=>{
+      nodeClasses.remove(className);
+    });
+    //nodeClasses.remove(activeClassName);
 
     Event.removeEndEventListener(node, node.rcEndListener);
     node.rcEndListener = null;
@@ -104,7 +107,10 @@ const cssAnimation = (node, transitionName, endCallback) => {
 
   node.rcAnimTimeout = requestAnimationTimeout(() => {
     node.rcAnimTimeout = null;
-    nodeClasses.add(activeClassName);
+    // nodeClasses.add(activeClassName);
+    activeClassName.split(' ').forEach((className)=>{
+      nodeClasses.add(className);
+    });
     if (active) {
       requestAnimationTimeout(active, 0);
     }

Diff for: components/vc-trigger/Popup.jsx

@@ -30,6 +30,7 @@ export default {
     }),
   },
   data() {
+    this.domEl = null;
     return {
       // Used for stretch
       stretchChecked: false,
@@ -43,6 +44,12 @@ export default {
       this.setStretchSize();
     });
   },
+  beforeUpdate() {
+    if(this.domEl && this.domEl.rcEndListener) {
+      this.domEl.rcEndListener();
+      this.domEl = null;
+    }
+  },
   updated() {
     this.$nextTick(() => {
       this.setStretchSize();
@@ -209,19 +216,21 @@ export default {
       const transitionEvent = {
         beforeEnter: () => {
           // el.style.display = el.__vOriginalDisplay
-          // this.$refs.alignInstance.forceAlign()
+          // this.$refs.alignInstance.forceAlign();
         },
         enter: (el, done) => {
           // align updated后执行动画
           this.$nextTick(() => {
             if (this.$refs.alignInstance) {
               this.$refs.alignInstance.$nextTick(() => {
+                this.domEl = el;
                 animate(el, `${transitionName}-enter`, done);
               });
             }
           });
         },
         leave: (el, done) => {
+          this.domEl = null;
           animate(el, `${transitionName}-leave`, done);
         },
       };