fix(components/Popover): fix animation bug caused by key placement

Author: KamilEmeleev

packages/components/src/components/Popover/Popover.module.css

@@ -6,24 +6,8 @@
   background-color: var(--kbq-background-bg);
   inline-size: var(--popover-inline-size);
   transition:
-    opacity var(--kbq-transition-slow),
-    transform var(--kbq-transition-slow);
-}
-
-.base[data-placement='top'] {
-  --popover-transform: translateY(-16px);
-}
-
-.base[data-placement='bottom'] {
-  --popover-transform: translateY(16px);
-}
-
-.base[data-placement='left'] {
-  --popover-transform: translateX(-16px);
-}
-
-.base[data-placement='right'] {
-  --popover-transform: translateX(16px);
+    opacity var(--kbq-transition-default),
+    transform var(--kbq-transition-default);
 }
 
 .base[data-placement='top'][data-arrow='true'] {
@@ -87,20 +71,16 @@
 /* transition */
 .base[data-transition='entering'] {
   opacity: 1;
-  transform: translate(0);
 }
 
 .base[data-transition='entered'] {
   opacity: 1;
-  transform: translate(0);
 }
 
 .base[data-transition='exiting'] {
   opacity: 0;
-  transform: var(--popover-transform);
 }
 
 .base[data-transition='exited'] {
   opacity: 0;
-  transform: var(--popover-transform);
 }

packages/components/src/components/Popover/Popover.tsx

@@ -134,10 +134,9 @@ export const Popover = forwardRef<ComponentRef<'div'>, PopoverProps>(
         })}
         <Transition
           onEnter={on}
-          timeout={300}
+          timeout={120}
           onExited={off}
           in={openState}
-          key={placement}
           nodeRef={domRef}
           unmountOnExit
           appear