fix(comp:*): overlay animating cls should be set only at leaving (#1552)

* fix(comp:*): overlay animating cls should be set only at leaving * fix: temp
IDuxFE · May 17, 2023 · c0d2e9c · c0d2e9c
1 parent 04e2500
commit c0d2e9c
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 15 deletions.
diff --git a/packages/components/_private/overlay/src/Overlay.tsx b/packages/components/_private/overlay/src/Overlay.tsx
@@ -27,7 +27,7 @@ import { isFunction } from 'lodash-es'
 import { vClickOutside } from '@idux/cdk/click-outside'
 import { type PopperElement, type PopperEvents, type PopperOptions, usePopper } from '@idux/cdk/popper'
 import { CdkPortal } from '@idux/cdk/portal'
-import { Logger, callEmit, convertElement, getFirstValidNode, useState } from '@idux/cdk/utils'
+import { Logger, callEmit, convertElement, getFirstValidNode } from '@idux/cdk/utils'
 import { useGlobalConfig } from '@idux/components/config'
 import { useZIndex } from '@idux/components/utils'
 
@@ -90,12 +90,7 @@ export default defineComponent({
       { immediate: true },
     )
 
-    const [isAnimating, setIsAnimating] = useState(false)
-    const onBeforeEnter = () => {
-      setIsAnimating(true)
-    }
     const onAfterLeave = () => {
-      setIsAnimating(false)
       if (props.destroyOnHide) {
         destroy()
       }
@@ -139,7 +134,6 @@ export default defineComponent({
         props,
         mergedPrefixCls,
         visibility,
-        isAnimating,
         currentZIndex,
         contentNode!,
         contentArrowRef,
@@ -152,7 +146,7 @@ export default defineComponent({
         <>
           {trigger}
           <CdkPortal target={mergedContainer.value} load={visibility.value}>
-            <Transition appear name={props.transitionName} onBeforeEnter={onBeforeEnter} onAfterLeave={onAfterLeave}>
+            <Transition appear name={props.transitionName} onAfterLeave={onAfterLeave}>
               {content}
             </Transition>
           </CdkPortal>
@@ -182,7 +176,6 @@ function renderContent(
   props: OverlayProps,
   mergedPrefixCls: ComputedRef<string>,
   visibility: ComputedRef<boolean>,
-  isAnimating: ComputedRef<boolean>,
   currentZIndex: ComputedRef<number>,
   contentNode: VNode[],
   arrowRef: Ref<PopperElement | undefined>,
@@ -195,16 +188,12 @@ function renderContent(
   }
 
   const prefixCls = mergedPrefixCls.value
-  const classes = {
-    [prefixCls]: true,
-    [`${prefixCls}-animating`]: isAnimating.value,
-  }
 
   const { triggerId } = props
   const overlayId = triggerId != null ? `__IDUX_OVERLAY-${triggerId}` : undefined
   const style = `z-index: ${currentZIndex.value}`
   const overlay = (
-    <div ref={popperRef} id={overlayId} class={classes} style={style} {...popperEvents.value} {...attrs}>
+    <div ref={popperRef} id={overlayId} class={prefixCls} style={style} {...popperEvents.value} {...attrs}>
       {contentNode}
       {props.showArrow && <div ref={arrowRef} class={`${prefixCls}-arrow`}></div>}
     </div>

diff --git a/packages/components/_private/overlay/style/index.less b/packages/components/_private/overlay/style/index.less
@@ -66,7 +66,7 @@
     }
   }
 
-  &[data-popper-reference-hidden]:not(&-animating) {
+  &[data-popper-reference-hidden] {
     visibility: hidden;
     opacity: 0;
     pointer-events: none;