Fix/expand not smoothly (#41)

* Add visiblility transtion on navtext * Build doc * preserving trailing semicolons
trendmicro-frontend · Nov 6, 2019 · 9117472 · 9117472
1 parent 09e3083
commit 9117472
Show file tree

Hide file tree

Showing 8 changed files with 734 additions and 267 deletions.
diff --git a/dist/react-sidenav.css b/dist/react-sidenav.css
diff --git a/dist/react-sidenav.min.css b/dist/react-sidenav.min.css
diff --git a/docs/bundle.js b/docs/bundle.js
diff --git a/docs/bundle.js.map b/docs/bundle.js.map
diff --git a/docs/index.html b/docs/index.html
@@ -11,5 +11,5 @@
 </head>
 <body>
 <div id="container"></div>
-<script type="text/javascript" src="bundle.js?f19157b84f0a6034d46d"></script></body>
+<script type="text/javascript" src="bundle.js?042afdb679b36b041cf3"></script></body>
 </html>
diff --git a/src/sidenav-expanded.styl b/src/sidenav-expanded.styl
@@ -3,7 +3,9 @@
 
     .sidenav-nav > .sidenav-navitem {
         .navicon + .navtext {
-            display: inline-block;
+            visibility: visible;
+            opacity: 1;
+            transition: opacity .2s linear;
         }
     }
 

diff --git a/src/sidenav-navitem.styl b/src/sidenav-navitem.styl
@@ -97,6 +97,9 @@
     }
 
     > .navitem .navicon + .navtext {
-        display: none;
+        width: 0;
+        visibility: hidden;
+        opacity: 0;
+        transition: visibility 0s .2s, opacity .2s linear;
     }
 }
diff --git a/src/sidenav.styl b/src/sidenav.styl
@@ -6,5 +6,5 @@
     z-index: 1006;
     min-width: 64px;
     background: #db3d44;
-    transition: min-width .15s;
+    transition: min-width .2s;
 }