perf: trigger animation

components/_util/getTransitionProps.js

@@ -5,12 +5,12 @@ const getTransitionProps = (transitionName, opt = {}) => {
   const transitionProps = {
     appear: true,
     appearFromClass: `${transitionName}-appear`,
-    appearActiveClass: `${transitionName}-appear ${transitionName}-appear-active`,
+    // appearActiveClass: `antdv-base-transtion`,
     appearToClass: `${transitionName}-appear ${transitionName}-appear-active`,
     enterFromClass: `${transitionName}-enter`,
-    enterActiveClass: `${transitionName}-enter ${transitionName}-enter-active`,
+    // enterActiveClass: `antdv-base-transtion`,
     enterToClass: `${transitionName}-enter ${transitionName}-enter-active`,
-    leaveFormClass: ` ${transitionName}-leave`,
+    leaveFromClass: ` ${transitionName}-leave`,
     leaveActiveClass: `${transitionName}-leave ${transitionName}-leave-active`,
     leaveToClass: `${transitionName}-leave ${transitionName}-leave-active`,
     ...opt,

components/vc-align/Align.jsx

@@ -80,7 +80,7 @@ export default {
             reAlign = true;
           }
         }
-        this.sourceRect = sourceRect;
+        this.sourceRect = { width: sourceRect.width, height: sourceRect.height };
       }
 
       if (reAlign) {
@@ -99,6 +99,11 @@ export default {
     this.stopMonitorWindowResize();
   },
   methods: {
+    // TODO
+    startMonitorElementResize() {
+      const currentElement = getElement(this.$props.target);
+      const element = findDOMNode(this);
+    },
     startMonitorWindowResize() {
       if (!this.resizeHandler) {
         this.bufferMonitor = buffer(this.forceAlign, this.$props.monitorBufferTime);

components/vc-align/util.js

@@ -50,3 +50,33 @@ export function restoreFocus(activeElement, container) {
     activeElement.focus();
   }
 }
+export function monitorResize(element, callback) {
+  let prevWidth = null;
+  let prevHeight = null;
+
+  function onResize([{ target }]) {
+    if (!document.documentElement.contains(target)) return;
+    const { width, height } = target.getBoundingClientRect();
+    const fixedWidth = Math.floor(width);
+    const fixedHeight = Math.floor(height);
+
+    if (prevWidth !== fixedWidth || prevHeight !== fixedHeight) {
+      // https://webkit.org/blog/9997/resizeobserver-in-webkit/
+      Promise.resolve().then(() => {
+        callback({ width: fixedWidth, height: fixedHeight });
+      });
+    }
+
+    prevWidth = fixedWidth;
+    prevHeight = fixedHeight;
+  }
+
+  const resizeObserver = new ResizeObserver(onResize);
+  if (element) {
+    resizeObserver.observe(element);
+  }
+
+  return () => {
+    resizeObserver.disconnect();
+  };
+}

components/vc-select2/examples/multiple.tsx

@@ -65,7 +65,7 @@ const Test = {
   render() {
     const { useAnim, showArrow, loading, value } = this.state;
     return (
-      <div>
+      <div style="margin: 20px">
         <h2>multiple select（scroll the menu）</h2>
 
         <p>

components/vc-trigger/Popup.jsx

@@ -151,10 +151,14 @@ export default {
 
     getClassName(currentAlignClassName, originClassName = '') {
       // 保留动画 class
-      const enterActiveClass = [
+      const enterActiveClass = [];
-        ...(this.transitionProps?.enterActiveClass?.split(' ') || []),
+      if (this.transitionProps) {
-        ...(this.transitionProps?.appearActiveClass?.split(' ') || []),
+        Object.keys(this.transitionProps).forEach(k => {
-      ];
+          if (typeof this.transitionProps[k] === 'string') {
+            enterActiveClass.push(...this.transitionProps[k].split(' '));
+          }
+        });
+      }
       const classNames = originClassName
         .split(' ')
         .filter(c => enterActiveClass.indexOf(c) !== -1)