fix: Popover custom show transition animation (#297)

arco-design · Nov 21, 2024 · c3ceaf2 · c3ceaf2
1 parent 55f6940
commit c3ceaf2
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/packages/arcodesign/components/popover/popover-inner.tsx b/packages/arcodesign/components/popover/popover-inner.tsx
@@ -38,7 +38,13 @@ export const PopoverInner = forwardRef((props: PopoverInnerProps, ref: Ref<Popov
         if (left || width || top || height || bottom) {
             if (!show) {
                 setTimeout(() => {
-                    setShow(true);
+                    setShow(() => {
+                        // bugfix:
+                        // 外层CSSTransition使用dom API而非通过react className属性修改class
+                        // 如果内部通过react className属性动态修改class会覆盖CSSTransition的设置，导致CSSTransition enter相关的class无法应用到组件
+                        domRef.current?.classList.add('show');
+                        return true;
+                    });
                 }, 0);
             }
         }
@@ -93,7 +99,6 @@ export const PopoverInner = forwardRef((props: PopoverInnerProps, ref: Ref<Popov
                 `${mode}-mode`,
                 className,
                 {
-                    show,
                     'with-shadow': needShadow,
                     'with-suffix': showCloseIcon || textSuffix,
                     'custom-content': typeof content !== 'string',