ソースを参照

Improve `SideMenu`s toggle button animation

Properly align the button's elements when opened.
Sergiu Miclea 8 年 前
コミット
1dd7ad5ab5
1 ファイル変更3 行追加1 行削除
  1. 3 1
      src/components/molecules/SideMenu/SideMenu.jsx

+ 3 - 1
src/components/molecules/SideMenu/SideMenu.jsx

@@ -25,9 +25,11 @@ const Wrapper = styled.div`
 `
 `
 const OpenTopLayer = css`
 const OpenTopLayer = css`
   transform: rotate(45deg) translateX(3px);
   transform: rotate(45deg) translateX(3px);
+  width: 19px;
 `
 `
 const OpenMiddleLayer = css`
 const OpenMiddleLayer = css`
   transform: rotate(-45deg) translateY(7px) translateX(-4px);
   transform: rotate(-45deg) translateY(7px) translateX(-4px);
+  width: 19px;
 `
 `
 const Close = css`
 const Close = css`
   transform: rotate(0) translateY(0) translateX(0);
   transform: rotate(0) translateY(0) translateX(0);
@@ -40,7 +42,7 @@ const OpenBottomLayer = css`
 const Hamburger = styled.div`
 const Hamburger = styled.div`
   cursor: pointer;
   cursor: pointer;
   #top-layer, #middle-layer, #bottom-layer {
   #top-layer, #middle-layer, #bottom-layer {
-    transition: all ${StyleProps.animations.swift};
+    transition: all .4s cubic-bezier(0, 1.4, 1, 1);
   }
   }
   #top-layer {
   #top-layer {
     ${props => props.open ? OpenTopLayer : Close};
     ${props => props.open ? OpenTopLayer : Close};