jQuery Transition Events Plugin
CSS Transition allows to write simple animation directly in CSS. It’s simpler,
faster and cleaner, that JavaScript animation by jQuery.fn.animate
.
But sometimes we need good old complete callback in JavaScript for
CSS Transitions animation.
This jQuery plugin allows to set listeners to CSS Transitions animation end or specific part. Plugin requires jQuery 1.8 or higher.
Method $.fn.transitionEnd
adds listener for all transitionend
future events.
Method $.fn.afterTransition
executes callback only once, after transition end.
CSS with transitions:
.slider {
transition: left 600ms;
}
.slider.video-position {
left: -100px;
}
Execute callback after current transition end:
$('.show-video').click(function () {
$('.slider').addClass('video-position').afterTransition(function () {
autoPlayVideo();
});
});
$.fn.afterTransition
Plugin has $.fn.afterTransition
function to execute callback after transition
end delay + (durationPart * duration)
. If browser doesn’t support
CSS Transitions, callbacks will be called immediately (because there will be no animation).
Callback often will be synchronized with transitionend
by
requestAnimationFrame
hack.
This function doesn’t check, that transition is really finished (it can be canceled in the middle).
If can set durationPart
and run callback in the middle of current transition:
$('.fliper').addClass('rotate').afterTransition(0.5, function () {
$(this).find('.backface').show();
});
If transition is set for several properties, $.fn.afterTransition
will execute
callback on every property. For example:
.car {
transition-property: top, left;
transition-duration: 1s, 4s;
transition-delay: 1s;
}
$('.car').addClass('at-home').afterTransition(function (e) {
console.log(e.propertyName + ' ' + e.elapsedTime);
});
This code will print "top 1"
and "left 4"
.
$.fn.transitionEnd
Modern browsers have transitionend
event. This plugin hides vendor prefix
problem from you.
// Bind synchronized listener to end of all future transitions.
$('.slider').transitionEnd(function () {
if ( $('.slider').hasClass('video-position') ) {
autoPlayVideo();
}
});
$('.show-video').click(function () {
slider.addClass('video-position');
});
$('.hide-video').click(function () {
// It will execute transitionEnd too
slider.removeClass('video-position');
});
Main difference with $.fn.afterTransition
is that this method adds callback
for all future transitions, not just for current one. Also callback won’t be
executed without CSS Transitions support.
If transition is set for several properties, $.fn.transitionEnd
will execute
callback on every property.
If transition is canceled before finishing $.fn.transitionEnd
won’t execute
callback (for example, you add transition to hover, and object looses hover in the
middle of animation).
Event object
Callbacks get object with properties:
type
– event name:transitionend
(be often with vendor prefix) oraftertransition
.currentTarget
– DOM node with CSS transition.propertyName
– CSS property name, which has transition. it will be empty, if CSS Transitions aren’t supported.elapsedTime
– number of seconds the transition had been running at the time the event fired. This value isn't affected by the value oftransition-delay
. It will be zero, if CSS Transitions isn’t supported.
Extra
Free additional present from plugin: you can check CSS Transitions support:
if ( $.Transitions.isSupported() ) {
// CSS Transitions is supported
}
Also you can call requestAnimationFrame
with polyfill and vendor prefixes
autodetection:
$.Transitions.animFrame(function () {
// Draw something
});
Installing
Ruby on Rails
For Ruby on Rails you can use gem for Assets Pipeline.
-
Add
transition-events-js
gem toGemfile
:gem "transition-events-js"
-
Install gems:
bundle install
-
Include plugin to your
application.js.coffee
:#= require transition-events
Others
If you don’t use any assets packaging manager (that’s very bad idea), you can use already minified version of the library. Take it from: github.com/ai/transition-events/downloads.
Contributing
Open test.html
in repository to run intergration tests.
License
Plugin is licensed under the GNU Lesser General Public License version 3. See the LICENSE file or gnu.org/licenses/lgpl.html.
Author
Andrey “A.I.” Sitnik [email protected]