perf: perf transtion

components/_util/getTransitionGroupProps.js

@@ -0,0 +1,21 @@
+// import animate from './css-animation';
+const getTransitionGroupProps = (transitionName, opt = {}) => {
+  if (process.env.NODE_ENV === 'test') {
+    return { css: false, ...opt };
+  }
+  const transitionProps = {
+    appear: true,
+    appearFromClass: `${transitionName}-appear`,
+    appearActiveClass: `${transitionName}`,
+    appearToClass: `${transitionName}-appear-active`,
+    enterFromClass: `${transitionName}-appear ${transitionName}-enter`,
+    enterActiveClass: `${transitionName}`,
+    enterToClass: `${transitionName}-appear-active ${transitionName}-enter-active`,
+    leaveActiveClass: `${transitionName} ${transitionName}-leave`,
+    leaveToClass: `${transitionName}-leave-active`,
+    ...opt,
+  };
+  return transitionProps;
+};
+
+export default getTransitionGroupProps;

components/_util/getTransitionProps.js

@@ -1,17 +1,18 @@
-import animate from './css-animation';
 const getTransitionProps = (transitionName, opt = {}) => {
   if (process.env.NODE_ENV === 'test') {
     return { css: false, ...opt };
   }
   const transitionProps = {
     appear: true,
-    css: false,
+    appearFromClass: `${transitionName}-appear`,
-    onEnter: (el, done) => {
+    appearActiveClass: `${transitionName}-appear ${transitionName}-appear-active`,
-      transitionName ? animate(el, `${transitionName}-enter`, done) : done();
+    appearToClass: `${transitionName}-appear ${transitionName}-appear-active`,
-    },
+    enterFromClass: `${transitionName}-enter`,
-    onLeave: (el, done) => {
+    enterActiveClass: `${transitionName}-enter ${transitionName}-enter-active`,
-      transitionName ? animate(el, `${transitionName}-leave`, done) : done();
+    enterToClass: `${transitionName}-enter ${transitionName}-enter-active`,
-    },
+    leaveFormClass: ` ${transitionName}-leave`,
+    leaveActiveClass: `${transitionName}-leave ${transitionName}-leave-active`,
+    leaveToClass: `${transitionName}-leave ${transitionName}-leave-active`,
     ...opt,
   };
   return transitionProps;

components/vc-select2/Selector/MultipleSelector.tsx

@@ -17,7 +17,7 @@ import {
 import classNames from '../../_util/classNames';
 import pickAttrs from '../../_util/pickAttrs';
 import PropTypes from '../../_util/vue-types';
-import getTransitionProps from '../../_util/getTransitionProps';
+import getTransitionGroupProps from '../../_util/getTransitionGroupProps';
 
 const REST_TAG_KEY = '__RC_SELECT_MAX_REST_COUNT__';
 
@@ -158,12 +158,12 @@ const SelectSelector = defineComponent<SelectorProps>({
               : maxTagPlaceholder,
         });
       }
-      const transitionProps = getTransitionProps(choiceTransitionName, {
+      const transitionProps = getTransitionGroupProps(choiceTransitionName, {
         appear: motionAppear,
       });
       selectionNode.value = (
         <TransitionGroup {...transitionProps}>
-          {displayValues.map(
+          {...displayValues.map(
             ({ key, label, value, disabled: itemDisabled, class: className, style }) => {
               const mergedKey = key || value;
               const closable = key !== REST_TAG_KEY && !itemDisabled;
@@ -180,7 +180,7 @@ const SelectSelector = defineComponent<SelectorProps>({
                 <span
                   key={mergedKey as string}
                   onMousedown={onMousedown}
-                  class={className}
+                  class={classNames(className)}
                   style={style}
                 >
                   {tagRender({
@@ -214,7 +214,6 @@ const SelectSelector = defineComponent<SelectorProps>({
               );
             },
           )}
-          {}
         </TransitionGroup>
       );
     });
@@ -238,6 +237,7 @@ const SelectSelector = defineComponent<SelectorProps>({
         onInputMouseDown,
         onInputCompositionStart,
         onInputCompositionEnd,
+        choiceTransitionName,
       } = props;
       return (
         <>

components/vc-select2/examples/multiple.tsx

@@ -18,7 +18,7 @@ for (let i = 10; i < 36; i += 1) {
 const Test = {
   data: () => ({
     state: {
-      useAnim: false,
+      useAnim: true,
       showArrow: false,
       loading: false,
       value: ['a10'],
@@ -64,7 +64,6 @@ const Test = {
 
   render() {
     const { useAnim, showArrow, loading, value } = this.state;
-    console.log(showArrow);
     return (
       <div>
         <h2>multiple select（scroll the menu）</h2>

components/vc-trigger/Popup.jsx

@@ -3,10 +3,10 @@ import PropTypes from '../_util/vue-types';
 import Align from '../vc-align';
 import PopupInner from './PopupInner';
 import LazyRenderBox from './LazyRenderBox';
-import animate from '../_util/css-animation';
 import BaseMixin from '../_util/BaseMixin';
 import { saveRef } from './utils';
 import { splitAttrs, findDOMNode } from '../_util/props-util';
+import getTransitionProps from '../_util/getTransitionProps';
 
 export default {
   name: 'VCTriggerPopup',
@@ -37,6 +37,7 @@ export default {
   data() {
     this.domEl = null;
     this.currentAlignClassName = undefined;
+    this.transitionProps = {};
     this.savePopupRef = saveRef.bind(this, 'popupInstance');
     this.saveAlignRef = saveRef.bind(this, 'alignInstance');
     return {
@@ -73,7 +74,7 @@ export default {
       // FIX: https://github.com/react-component/tooltip/issues/79
       if (this.currentAlignClassName !== currentAlignClassName) {
         this.currentAlignClassName = currentAlignClassName;
-        popupDomNode.className = this.getClassName(currentAlignClassName);
+        popupDomNode.className = this.getClassName(currentAlignClassName, popupDomNode.className);
       }
       const { onaAlign } = this.$attrs;
       onaAlign && onaAlign(popupDomNode, align);
@@ -148,10 +149,19 @@ export default {
       return transitionName;
     },
 
-    getClassName(currentAlignClassName) {
+    getClassName(currentAlignClassName, originClassName = '') {
+      // 保留动画 class
+      const enterActiveClass = [
+        ...(this.transitionProps?.enterActiveClass?.split(' ') || []),
+        ...(this.transitionProps?.appearActiveClass?.split(' ') || []),
+      ];
+      const classNames = originClassName
+        .split(' ')
+        .filter(c => enterActiveClass.indexOf(c) !== -1)
+        .join(' ');
       return `${this.$props.prefixCls} ${this.$attrs.class || ''} ${
         this.$props.popupClassName
-      } ${currentAlignClassName}`;
+      } ${currentAlignClassName} ${classNames}`;
     },
     getPopupElement() {
       const { savePopupRef } = this;
@@ -209,38 +219,10 @@ export default {
         ref: savePopupRef,
         style: { ...sizeStyle, ...popupStyle, ...style, ...this.getZIndexStyle() },
       };
-      let transitionProps = {
+
-        appear: true,
-        css: false,
-      };
       const transitionName = getTransitionName();
       let useTransition = !!transitionName;
-      const transitionEvent = {
+      let transitionProps = getTransitionProps(transitionName);
-        onBeforeEnter: () => {
-          // el.style.display = el.__vOriginalDisplay
-          // this.alignInstance.forceAlign();
-        },
-        onEnter: (el, done) => {
-          // render 后 vue 会移除通过animate动态添加的 class导致动画闪动，延迟两帧添加动画class，可以进一步定位或者重写 transition 组件
-          this.$nextTick(() => {
-            if (this.alignInstance) {
-              this.alignInstance.$nextTick(() => {
-                this.domEl = el;
-                animate(el, `${transitionName}-enter`, done);
-              });
-            } else {
-              done();
-            }
-          });
-        },
-        onBeforeLeave: () => {
-          this.domEl = null;
-        },
-        onLeave: (el, done) => {
-          animate(el, `${transitionName}-leave`, done);
-        },
-      };
-      transitionProps = { ...transitionProps, ...transitionEvent };
       if (typeof animation === 'object') {
         useTransition = true;
         transitionProps = { ...transitionProps, ...animation };
@@ -248,6 +230,7 @@ export default {
       if (!useTransition) {
         transitionProps = {};
       }
+      this.transitionProps = transitionProps;
       if (destroyPopupOnHide) {
         return (
           <Transition {...transitionProps}>