feat(menu): remove error animation style and expose delay to control …

…animation time
yehuozhili · Jun 19, 2020 · 90918bd · 90918bd
1 parent 74934f9
commit 90918bd
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 29 deletions.
diff --git a/src/components/Menu/_style.scss b/src/components/Menu/_style.scss
@@ -154,33 +154,28 @@
 
 .menu-zoom-in-top-enter {
     opacity: 0;
-    top:calc(100% + #{$menu-item-padding-y});
     transform: scaleY(0) translateX(-50%) ;
 }
 .menu-zoom-in-top-enter-active {
-    opacity: 1;
-    top:calc(100% + #{$menu-item-padding-y});
-    transform: scaleY(1) translateX(-50%) ;
-    transform-origin: center top;
-    transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+    opacity: 0;
+    transform: scaleY(0) translateX(-50%) ;
 }
 
 .menu-zoom-in-top-enter-done {
     opacity: 1;
-    top:calc(100% + #{$menu-item-padding-y});
     transform: scaleY(1) translateX(-50%) ;
     transform-origin: center top;
     transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
 }
 
 .menu-zoom-in-top-exit {
-    opacity: 1;
-    top:calc(100% + #{$menu-item-padding-y});
-    transform: scaleY(1) translateX(-50%) ;
+    opacity: 0;
+    transform: scaleY(0) translateX(-50%) ;
+    transform-origin:center top;
+    transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
 }
 .menu-zoom-in-top-exit-active {
     opacity: 0;
-    top:calc(100% + #{$menu-item-padding-y});
     transform: scaleY(0) translateX(-50%) ;
     transform-origin:center top;
     transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
@@ -189,33 +184,28 @@
 
 .bigbear-submenu-children.menu-zoom-in-top-vertical-enter {
     opacity: 0;
-    top:calc(100% + #{$menu-item-padding-y});
     transform: scaleY(0) translateX(0) ;
 }
 .bigbear-submenu-children.menu-zoom-in-top-vertical-enter-active {
-    opacity: 1;
-    top:calc(100% + #{$menu-item-padding-y});
-    transform: scaleY(1) translateX(0) ;
-    transform-origin: center top;
-    transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+    opacity: 0;
+    transform: scaleY(0) translateX(0) ;
 }
 
 .bigbear-submenu-children.menu-zoom-in-top-vertical-enter-done {
     opacity: 1;
-    top:calc(100% + #{$menu-item-padding-y});
     transform: scaleY(1) translateX(0) ;
     transform-origin: center top;
     transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
 }
 
 .bigbear-submenu-children.menu-zoom-in-top-vertical-exit {
-    opacity: 1;
-    top:calc(100% + #{$menu-item-padding-y});
-    transform: scaleY(1) translateX(0) ;
+    opacity: 0;
+    transform: scaleY(0) translateX(0) ;
+    transform-origin:center top;
+    transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
 }
 .bigbear-submenu-children.menu-zoom-in-top-vertical-exit-active {
     opacity: 0;
-    top:calc(100% + #{$menu-item-padding-y});
     transform: scaleY(0) translateX(0) ;
     transform-origin:center top;
     transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;

diff --git a/src/components/Menu/submenu.tsx b/src/components/Menu/submenu.tsx
@@ -26,22 +26,25 @@ export interface SubMenuProps {
 	className?: string;
 	/** 样式*/
 	style?: CSSProperties;
-	/** 开启横向menu的hover打卡submenu */
+	/** 横向menu的hover打开submenu？ */
 	hover?: boolean;
 	/** 是否开启文字旁边小箭头图标 */
 	icon?: boolean;
 	/** 是否要点击submenu外关闭submenu？ho为横向,ver为纵向,none为都不关闭 */
 	unique?: "ho" | "ver" | "none";
 	/** submenu的title的样式*/
 	titleStyle?: CSSProperties;
+	/** 菜单打开的动画延迟 */
+	delay?: number;
 }
 
 const renderChildren = (
 	children: React.ReactNode,
 	menuopen: boolean,
 	index: string | undefined,
 	mode: "horizontal" | "vertical" | undefined,
-	setMenuopen: React.Dispatch<React.SetStateAction<boolean>>
+	setMenuopen: React.Dispatch<React.SetStateAction<boolean>>,
+	delay: number
 ) => {
 	const classes = classNames("bigbear-submenu-children", {
 		"bigbear-menuopen": menuopen
@@ -60,7 +63,7 @@ const renderChildren = (
 	return (
 		<Transition
 			in={menuopen}
-			timeout={300}
+			timeout={delay}
 			classNames={mode === "horizontal" ? "menu-zoom-in-top" : "menu-zoom-in-top-vertical"}
 		>
 			<ul className={classes}>{childrenComponent}</ul>
@@ -78,7 +81,8 @@ export const SubMenu: FC<SubMenuProps> = (props) => {
 		titleStyle,
 		hover,
 		icon,
-		unique
+		unique,
+		delay
 	} = props;
 	const context = useContext(MenuContext);
 	const [menuopen, setMenuopen] = useState(
@@ -109,7 +113,7 @@ export const SubMenu: FC<SubMenuProps> = (props) => {
 		e.preventDefault();
 		timer = window.setTimeout(() => {
 			setMenuopen(toggle);
-		}, 300);
+		}, delay);
 	};
 	const hoverEvents =
 		context.mode !== "vertical" && hover
@@ -144,7 +148,7 @@ export const SubMenu: FC<SubMenuProps> = (props) => {
 				{title ? title : null}
 				{icon && <Icon icon="angle-down" className="bigbear-submenu-icon"></Icon>}
 			</div>
-			{renderChildren(children, menuopen, index, context.mode, setMenuopen)}
+			{renderChildren(children, menuopen, index, context.mode, setMenuopen, delay!)}
 		</li>
 	);
 };
@@ -155,7 +159,8 @@ SubMenu.defaultProps = {
 	isopen: false,
 	hover: false,
 	icon: true,
-	unique: "ho"
+	unique: "ho",
+	delay: 300
 };
 
 export default SubMenu;