Created
August 20, 2013 20:52
-
-
Save mgrandrath/6287152 to your computer and use it in GitHub Desktop.
CSS Transitions
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .hidden { | |
| display: none; | |
| } | |
| .visible, | |
| .invisible.fade-in { | |
| opacity: 1; | |
| -webkit-transform: translateX(0); | |
| } | |
| .invisible, | |
| .visible.fade-out { | |
| opacity: 0; | |
| -webkit-transform: translateX(-50px); | |
| } | |
| .container { | |
| margin-top: 5em; | |
| margin-left: 3em; | |
| width: 200px; | |
| height: 40px; | |
| background-color: #999; | |
| transition-property: all; | |
| transition-duration: 250ms, 400ms; | |
| transition-timing-function: ease-out; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Transition</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <button id="toggle">Fade</button> | |
| <div id="target" class="container hidden"></div> | |
| <script src="transition.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var feature = (function () { | |
| function supportsTransitions() { | |
| var body, | |
| style, | |
| transition, | |
| vendorPrefixes, | |
| i; | |
| body = document.body || document.documentElement; | |
| style = body.style; | |
| transition = "transition"; | |
| if (typeof style[transition] === "string") { | |
| return true; | |
| } | |
| vendorPrefixes = ["Webkit", "Moz", "O", "ms"]; | |
| transition = transition.charAt(0).toUpperCase() + transition.substr(1); | |
| for (i = 0; i < vendorPrefixes.length; i += 1) { | |
| if (typeof style[vendorPrefixes[i] + transition] === "string") { | |
| return true; | |
| } | |
| } | |
| return false; | |
| } | |
| })(); | |
| var CssTransition = (function () { | |
| "use strict"; | |
| var TRANSITION_END = "transitionend", | |
| NOOP = function () {}; | |
| function runAnimated(callback) { | |
| var self = this, | |
| domNode = self._domNode; | |
| if (self.isAnimating()) { | |
| return; | |
| } | |
| function finalize() { | |
| domNode.removeEventListener(TRANSITION_END, finalize); | |
| self._finish(domNode); | |
| self._isAnimating = false; | |
| if (typeof callback === "function") { | |
| callback(); | |
| } | |
| } | |
| domNode.addEventListener(TRANSITION_END, finalize); | |
| self._isAnimating = true; | |
| self._setup(domNode); | |
| setTimeout(function () { self._run(domNode); }, 0); | |
| } | |
| function runFallback(callback) { | |
| var self = this, | |
| domNode = self._domNode; | |
| self._setup(domNode); | |
| self._run(domNode); | |
| self._finish(domNode); | |
| if (typeof callback === "function") { | |
| callback(); | |
| } | |
| } | |
| function CssTransition(domNode, setup, run, finish) { | |
| this._domNode = domNode; | |
| this._setup = setup || NOOP; | |
| this._run = run || NOOP; | |
| this._finish = finish || NOOP; | |
| this._isAnimating = false; | |
| } | |
| // check for browser support and assign the appropriate function | |
| CssTransition.prototype.run = runAnimated; | |
| // CssTransition.prototype.run = runFallback; | |
| CssTransition.prototype.isAnimating = function () { | |
| return this._isAnimating; | |
| }; | |
| return CssTransition; | |
| })(); | |
| (function () { | |
| "use strict"; | |
| var btnToggle = getBtnToggle(), | |
| target = getTarget(), | |
| isHidden = target.classList.contains("hidden"); | |
| function setupFadeIn(domNode) { | |
| domNode.classList.add("invisible"); | |
| domNode.classList.remove("hidden"); | |
| } | |
| function setupFadeOut(domNode) { | |
| domNode.classList.add("visible"); | |
| } | |
| function runFadeIn(domNode) { | |
| domNode.classList.add("fade-in"); | |
| } | |
| function runFadeOut(domNode) { | |
| domNode.classList.add("fade-out"); | |
| } | |
| function finish(domNode) { | |
| domNode.classList.remove("invisible", "visible", "fade-in", "fade-out"); | |
| isHidden || domNode.classList.add("hidden"); | |
| isHidden = !isHidden; | |
| } | |
| var fadeIn = new CssTransition(target, setupFadeIn, runFadeIn, finish); | |
| var fadeOut = new CssTransition(target, setupFadeOut, runFadeOut, finish); | |
| btnToggle.addEventListener("click", onClick, false); | |
| // -------------------------------------------------- | |
| // Event handlers | |
| // -------------------------------------------------- | |
| function onClick() { | |
| if (isHidden) { | |
| fadeIn.run(); | |
| } | |
| else { | |
| fadeOut.run(); | |
| } | |
| } | |
| // -------------------------------------------------- | |
| // Helpers | |
| // -------------------------------------------------- | |
| function getBtnToggle() { | |
| return byId("toggle"); | |
| } | |
| function getTarget() { | |
| return byId("target"); | |
| } | |
| function byId(id) { | |
| return document.getElementById(id); | |
| } | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment