fix: trigger animate #5008

close #5008

Author: tangjinzhou

components/_util/transition.tsx

@@ -26,7 +26,7 @@ export const getTransitionProps = (transitionName: string, opt: TransitionProps
         // appearActiveClass: `antdv-base-transtion`,
         // appearToClass: `${transitionName}-appear ${transitionName}-appear-active`,
         enterFromClass: `${transitionName}-enter ${transitionName}-enter-prepare`,
-        // enterActiveClass: `${transitionName}-enter ${transitionName}-enter-active`,
+        enterActiveClass: `${transitionName}-enter ${transitionName}-enter-prepare`,
         enterToClass: `${transitionName}-enter ${transitionName}-enter-active`,
         leaveFromClass: ` ${transitionName}-leave`,
         leaveActiveClass: `${transitionName}-leave ${transitionName}-leave-active`,

components/vc-trigger/Popup/PopupInner.tsx

@@ -39,9 +39,25 @@ export default defineComponent({
         measureStretchStyle(props.getRootDomNode());
       }
     };
+    const visible = ref(false);
+    let timeoutId: any;
+    watch(
+      () => props.visible,
+      val => {
+        clearTimeout(timeoutId);
+        if (val) {
+          timeoutId = setTimeout(() => {
+            visible.value = props.visible;
+          });
+        } else {
+          visible.value = false;
+        }
+      },
+      { immediate: true },
+    );
 
     // ======================== Status ========================
-    const [status, goNextStatus] = useVisibleStatus(toRef(props, 'visible'), doMeasure);
+    const [status, goNextStatus] = useVisibleStatus(visible, doMeasure);
 
     // ======================== Aligns ========================
     const prepareResolveRef = ref<(value?: unknown) => void>();
@@ -117,7 +133,6 @@ export default defineComponent({
     return () => {
       const {
         zIndex,
-        visible,
         align,
         prefixCls,
         destroyPopupOnHide,
@@ -131,7 +146,8 @@ export default defineComponent({
       const mergedStyle: CSSProperties = {
         ...stretchStyle.value,
         zIndex,
-        opacity: statusValue === 'motion' || statusValue === 'stable' || !visible ? undefined : 0,
+        opacity:
+          statusValue === 'motion' || statusValue === 'stable' || !visible.value ? undefined : 0,
         pointerEvents: statusValue === 'stable' ? undefined : 'none',
         ...(attrs.style as object),
       };
@@ -149,17 +165,18 @@ export default defineComponent({
         childNode = <div class={`${prefixCls}-content`}>{childNode}</div>;
       }
       const mergedClassName = classNames(prefixCls, attrs.class, alignedClassName.value);
-      const transitionProps = getTransitionProps(motion.value.name, motion.value);
+      const hasAnimate = visible.value || !props.visible;
+      const transitionProps = hasAnimate ? getTransitionProps(motion.value.name, motion.value) : {};
       return (
         <Transition
           ref={elementRef}
           {...transitionProps}
           onBeforeEnter={onShowPrepare}
           v-slots={{
             default: () => {
-              return !destroyPopupOnHide || visible ? (
+              return !destroyPopupOnHide || props.visible ? (
                 <Align
-                  v-show={visible}
+                  v-show={visible.value}
                   target={getAlignTarget()}
                   key="popup"
                   ref={alignRef}

components/vc-trigger/Popup/useVisibleStatus.ts

@@ -1,5 +1,5 @@
 import type { Ref } from 'vue';
-import { nextTick, onBeforeUnmount, ref, watch, onMounted } from 'vue';
+import { onBeforeUnmount, ref, watch, onMounted } from 'vue';
 import type { RafFrame } from '../../_util/raf';
 import raf from '../../_util/raf';
 
@@ -76,7 +76,7 @@ export default (
         }
 
         if (status.value) {
-          nextTick(() => {
+          rafRef.value = raf(async () => {
             const index = StatusQueue.indexOf(status.value);
             const nextStatus = StatusQueue[index + 1];
             if (nextStatus && index !== -1) {

components/vc-virtual-list/ScrollBar.tsx

@@ -62,12 +62,12 @@ export default defineComponent({
   },
 
   mounted() {
-    this.scrollbarRef.current.addEventListener(
+    this.scrollbarRef.current?.addEventListener(
       'touchstart',
       this.onScrollbarTouchStart,
       supportsPassive ? ({ passive: false } as EventListenerOptions) : false,
     );
-    this.thumbRef.current.addEventListener(
+    this.thumbRef.current?.addEventListener(
       'touchstart',
       this.onMouseDown,
       supportsPassive ? ({ passive: false } as EventListenerOptions) : false,