A simple feature-detect for Ender to make <code>$.support.transition</code> available in browsers.
A simple feature-detect for Ender to make
$.support.transition available in browsers. Where CSS transitions are supported, it will contain an object with an
'end' property which will identify the current browser's equivalent of the
'transitionEnd' event. Where CSS transitions are not supported,
$.support.transition will be
Also adds a convenience
onTransitionEnd() method to your Ender collections (see bottom example).
Add to your ender build with:
$ ender add ender-transition-support
var $button = $'button'$div = $'div'$buttonon'click'var postif $buttontext == 'show'$divshow0offsetHeight // trigger DOM reflow$divaddClass'shown'$button0disabled = true$button0disabled = false$buttontext'hide'if $supporttransition$divone$supporttransitionend postelsepostelse$divremoveClass'shown'$button0disabled = true$divhide$buttontext'show'$button0disabled = falseif $supporttransition$divone$supporttransitionend postelsepost
This example is available in the file example.html in the repository if you want to play with it.
Note how you can use a check for
$.support.transition to allow for browsers with and without transition support. Also note the use of
one() rather than
on(), you don't want to leave your event handlers laying around if you don't need to reuse them!
onTransitionEnd() method is simply a wrapper around the above pattern where you provide a callback function that is either triggered on the
'transitionEnd' event or is called directly if transition events aren't supported. Using it we can trim down our example
'click' handler to the following:
$buttonon'click'if $buttontext == 'show'$divshow0offsetHeight // force reflow$divaddClass'shown'$button0disabled = true$divonTransitionEnd$button0disabled = false$buttontext'hide'else$divremoveClass'shown'$button0disabled = true$divonTransitionEnd$divhide$buttontext'show'$button0disabled = false
Credit for the feature-detect goes to the Modernizr, I lifted the code from Bootstrap.
Licenced under the MIT licence. All rights not explicitly granted in the MIT license are reserved. See the included LICENSE file for more details.