fix(submenu): fix submenu animation bug

yehuozhili · Jun 3, 2020 · 96edbf7 · 96edbf7
1 parent 85a02f2
commit 96edbf7
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 5 deletions.
diff --git a/src/components/Menu/_style.scss b/src/components/Menu/_style.scss
@@ -43,7 +43,6 @@
         top:calc(100% + #{$menu-item-padding-y});
         white-space: nowrap;
         left: 50%;
-        transform: translateX(-50%);
         background: $white;
         border: $menu-item-active-border-width solid transparent;
         box-shadow: $submenu-box-shadow;
@@ -137,3 +136,74 @@
         }
     }
 }
+
+
+
+.menu-zoom-in-top-enter {
+    opacity: 0;
+    transform: scaleY(0) translateX(-50%) ;
+    top:calc(100% + #{$menu-item-padding-y});
+}
+.menu-zoom-in-top-enter-active {
+    opacity: 1;
+    transform: scaleY(1) translateX(-50%) ;
+    transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+    transform-origin: center top;
+    top:calc(100% + #{$menu-item-padding-y});
+}
+
+.menu-zoom-in-top-enter-done {
+    opacity: 1;
+    transform: scaleY(1) translateX(-50%) ;
+    transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+    transform-origin: center top;
+    top:calc(100% + #{$menu-item-padding-y});
+}
+
+.menu-zoom-in-top-exit {
+    opacity: 1;
+    transform: scaleY(1) translateX(-50%) ;
+    top:calc(100% + #{$menu-item-padding-y});
+}
+.menu-zoom-in-top-exit-active {
+    opacity: 0;
+    transform: scaleY(0) translateX(-50%) ;
+    transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+    transform-origin:center top;
+    top:calc(100% + #{$menu-item-padding-y});
+}
+
+
+.bigbear-submenu-children.menu-zoom-in-top-vertical-enter {
+    opacity: 0;
+    transform: scaleY(0) translateX(0) ;
+    top:calc(100% + #{$menu-item-padding-y});
+}
+.bigbear-submenu-children.menu-zoom-in-top-vertical-enter-active {
+    opacity: 1;
+    transform: scaleY(1) translateX(0) ;
+    transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+    transform-origin: center top;
+    top:calc(100% + #{$menu-item-padding-y});
+}
+
+.bigbear-submenu-children.menu-zoom-in-top-vertical-enter-done {
+    opacity: 1;
+    transform: scaleY(1) translateX(0) ;
+    transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+    transform-origin: center top;
+    top:calc(100% + #{$menu-item-padding-y});
+}
+
+.bigbear-submenu-children.menu-zoom-in-top-vertical-exit {
+    opacity: 1;
+    transform: scaleY(1) translateX(0) ;
+    top:calc(100% + #{$menu-item-padding-y});
+}
+.bigbear-submenu-children.menu-zoom-in-top-vertical-exit-active {
+    opacity: 0;
+    transform: scaleY(0) translateX(0) ;
+    transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+    transform-origin:center top;
+    top:calc(100% + #{$menu-item-padding-y});
+}
diff --git a/src/components/Menu/submenu.tsx b/src/components/Menu/submenu.tsx
@@ -19,7 +19,7 @@ export interface SubMenuProps{
     style?:CSSProperties
 }
 
-const renderChildren = (children:React.ReactNode,menuopen:boolean,index:string|undefined) => {
+const renderChildren = (children:React.ReactNode,menuopen:boolean,index:string|undefined,mode:"horizontal" | "vertical" | undefined) => {
     const classes =classNames('bigbear-submenu-children',{
         'bigbear-menuopen':menuopen
     })
@@ -37,7 +37,7 @@ const renderChildren = (children:React.ReactNode,menuopen:boolean,index:string|u
         <Transition
             in={menuopen}
             timeout={300}
-            animation='zoom-in-top'
+            classNames={mode==='horizontal'?'menu-zoom-in-top':'menu-zoom-in-top-vertical'}
         >
         <ul className={classes} >
             {childrenComponent}
@@ -78,12 +78,12 @@ export const SubMenu:FC<SubMenuProps>=(props)=>{
         }
     },[isopen])
     return (
-        <li key={index} className={classes} style={style}  onClick={handleClick} {...hoverEvents}>
+        <li key={index} className={classes} style={style}  onClick={handleClick} {...hoverEvents } >
             <div onClick={()=>context.mode==='vertical'?setMenuopen(!menuopen):null} className='bigbear-submenu-title'>
                 {title?title:null}
                 <Icon icon="angle-down" className='bigbear-submenu-icon'></Icon>
             </div>
-            {renderChildren(children,menuopen,index)}
+            {renderChildren(children,menuopen,index,context.mode)}
         </li>
     )
 }