From 1208649a9e774639eef6341dccc70e28a8037389 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Fri, 25 Oct 2019 00:04:47 +0800 Subject: [PATCH] fix: Auto complete dropdown flickers #1327 --- components/_util/css-animation/index.js | 12 +++++++++--- components/vc-trigger/Popup.jsx | 11 ++++++++++- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/components/_util/css-animation/index.js b/components/_util/css-animation/index.js index 5cc53fa07..9288282d8 100644 --- 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}-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 --git a/components/vc-trigger/Popup.jsx b/components/vc-trigger/Popup.jsx index 8a905606a..3b4a0ebfe 100644 --- a/components/vc-trigger/Popup.jsx +++ b/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); }, };