"past, present and future classes on step elements"

impress · Mar 10, 2012 · b23506e · b23506e
1 parent b0a139e
commit b23506e
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 20 deletions.
diff --git a/css/impress-demo.css b/css/impress-demo.css
@@ -256,47 +256,40 @@ body     { pointer-events: none; }
     transition:         0.5s;
 }
 
-#ing.active .positioning {
+#ing.present .positioning {
     -webkit-transform: translateY(-10px);
     -moz-transform:    translateY(-10px);
     -ms-transform:     translateY(-10px);
     -o-transform:      translateY(-10px);
     transform:         translateY(-10px);
-
-    -webkit-transition-delay: 1.5s;
-    -moz-transition-delay:    1.5s;
-    -ms-transition-delay:     1.5s;
-    -o-transition-delay:      1.5s;
-    transition-delay:         1.5s;
 }
 
-#ing.active .rotating {
+#ing.present .rotating {
     -webkit-transform: rotate(-10deg);
     -moz-transform:    rotate(-10deg);
     -ms-transform:     rotate(-10deg);
     -o-transform:      rotate(-10deg);
     transform:         rotate(-10deg);
 
-    -webkit-transition-delay: 1.75s;
-    -moz-transition-delay:    1.75s;
-    -ms-transition-delay:     1.75s;
-    -o-transition-delay:      1.75s;
-    transition-delay:         1.75s;
+    -webkit-transition-delay: 0.25s;
+    -moz-transition-delay:    0.25s;
+    -ms-transition-delay:     0.25s;
+    -o-transition-delay:      0.25s;
+    transition-delay:         0.25s;
 }
 
-#ing.active .scaling {
+#ing.present .scaling {
     -webkit-transform: scale(0.7);
     -moz-transform:    scale(0.7);
     -ms-transform:     scale(0.7);
     -o-transform:      scale(0.7);
     transform:         scale(0.7);
 
-    -webkit-transition-delay: 2s;
-    -moz-transition-delay:    2s;
-    -ms-transition-delay:     2s;
-    -o-transition-delay:      2s;
-    transition-delay:         2s;
-
+    -webkit-transition-delay: 0.5s;
+    -moz-transition-delay:    0.5s;
+    -ms-transition-delay:     0.5s;
+    -o-transition-delay:      0.5s;
+    transition-delay:         0.5s;
 }
 
 /* imagination */

diff --git a/js/impress.js b/js/impress.js
@@ -424,6 +424,21 @@
             return stepTo(next);
         };
 
+        // STEP CLASSES
+        steps.forEach(function (step) {
+            step.classList.add("future");
+        });
+
+        document.addEventListener("impressStepEnter", function (event) {
+            event.target.classList.remove("future");
+            event.target.classList.add("present");
+        }, false);
+
+        document.addEventListener("impressStepLeave", function (event) {
+            event.target.classList.remove("present");
+            event.target.classList.add("past");
+        }, false);
+
         // HASH CHANGE
 
         // `#/step-id` is used instead of `#step-id` to prevent default browser