Separate transitions in a file

src/stylesheets/lungo.layout.styl

@@ -23,28 +23,20 @@ body
   // &[data-position="fixed"] > section
   //   position: fixed
 
-  & [data-transition]
-    // display: block !important
-    display-box()
-    transition-property( opacity, z-index, transform )
-    transition-duration( TRANSITION_TIME )
-    transition-timing-function( DEFAULT_TRANSITION )
-    backface-visibility( hidden )
 
-  & > aside, > section
-    display-box()
-    box-orient(vertical)
-    height: inherit
-    & header, footer
-      box-flex(0)
-      z-index: 3
-    & article
-      box-flex(1)
-      z-index: 0
+aside, section
+  display-box()
+  box-orient(vertical)
+  height: inherit
+  & > header, > footer
+    box-flex(0)
+    z-index: 3
+  & > article
+    box-flex(1)
+    z-index: 0
 
 section
   z-index: 2
   &:not(.show)
     z-index: 1
     display: none
-

src/stylesheets/lungo.layout.transition.styl

@@ -10,6 +10,14 @@
 @import "constants.styl"
 
 section
+  &[data-transition]
+    // display: block !important
+    display-box()
+    transition-property( opacity, z-index, transform )
+    transition-duration( TRANSITION_TIME )
+    transition-timing-function( DEFAULT_TRANSITION )
+    backface-visibility( hidden )
+
   /* Transition: POP */
   &[data-transition="pop"]
     opacity: 0
@@ -23,12 +31,12 @@ section
 
   /* Transition: SLIDE */
   &[data-transition="slide"]
-    transform( translateX(100%) )
+    transform translateX(100%)
     visibility: visible !important
     &.show
-      transform( translateX(0%) )
+      transform translateX(0%)
     &.hide
-      transform( translateX(-100%) )
+      transform translateX(-100%)
 
   /* Transition: COVER */
   &[data-transition="cover"]