diff options
author | Bartek Szopka <bartek.szopka+github@gmail.com> | 2012-03-10 23:06:48 +0000 |
---|---|---|
committer | Bartek Szopka <bartek.szopka+github@gmail.com> | 2012-03-10 23:06:48 +0000 |
commit | b23506e885d33b53191dc0675c0a05585895a24a (patch) | |
tree | 547935fe92f06f8b42bf58189f758f1c1507b656 | |
parent | b0a139ef81aaa73a5227b5ac47b6caf8f58d359d (diff) | |
download | impress.js-b23506e885d33b53191dc0675c0a05585895a24a.tar.gz |
"`past`, `present` and `future` classes on step elements"
-rw-r--r-- | css/impress-demo.css | 33 | ||||
-rw-r--r-- | js/impress.js | 15 |
2 files changed, 28 insertions, 20 deletions
diff --git a/css/impress-demo.css b/css/impress-demo.css index 35ac07d..70e2c2a 100644 --- 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 index 8498cc6..6681d36 100644 --- 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 |