Jelajahi Sumber

Aside hide with transition-delay

bye bye setTimeout()
soyjavi 13 tahun lalu
induk
melakukan
4ba1b14773
2 mengubah file dengan 15 tambahan dan 8 penghapusan
  1. 13 4
      src/stylesheets/lungo.layout.aside.styl
  2. 2 4
      src/view/Lungo.View.Aside.js

+ 13 - 4
src/stylesheets/lungo.layout.aside.styl

@@ -27,15 +27,24 @@ aside
   bottom: 0
   height: inherit
   width: ASIDE_WIDTH
-  display: none
+  visibility: hidden
   z-index: -1
 
-  &.right
-    right: 0px
+  transition-property( opacity, z-index, transform )
+  transition-duration( TRANSITION_TIME )
+  transition-timing-function( DEFAULT_TRANSITION )
+  backface-visibility( hidden )
 
   &.show
     z-index: 0
-    display: block
+    visibility: visible
+
+  &:not(.right)
+    transform translateX(-(ASIDE_WIDTH))
+    &.show
+      transform translateX(0px)
+  &.right
+    right: 0px
 
   & header, footer
     position: relative

+ 2 - 4
src/view/Lungo.View.Aside.js

@@ -68,10 +68,8 @@ Lungo.View.Aside = (function(lng, undefined) {
                 lng.Element.Cache.section.removeClass(aside_stylesheet);
             }
 
-            setTimeout(function() {
-                aside.removeClass(CLASS.SHOW);
-                lng.Element.Cache.aside = null;
-            }, 350);
+            lng.Element.Cache.aside = null;
+            aside.removeClass(CLASS.SHOW);
         }
     };