jQuery plugin to set listeners to CSS Transition animation end or specific part
JavaScript CoffeeScript Ruby
Switch branches/tags
Nothing to show
Latest commit f90282a Dec 13, 2014 @ai Add Evil Martians badge


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 () {
Sponsored by Evil Martians


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 () {

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".


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') ) {
$('.show-video').click(function () {
$('.hide-video').click(function () {
    // It will execute transitionEnd too

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) or aftertransition.
  • 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 of transition-delay. It will be zero, if CSS Transitions isn’t supported.


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


Ruby on Rails

For Ruby on Rails you can use gem for Assets Pipeline.

  1. Add transition-events-js gem to Gemfile:

    gem "transition-events-js"
  2. Install gems:

    bundle install
  3. Include plugin to your application.js.coffee:

    #= require transition-events


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.


Open test.html in repository to run intergration tests.


Plugin is licensed under the GNU Lesser General Public License version 3. See the LICENSE file or gnu.org/licenses/lgpl.html.


Andrey “A.I.” Sitnik andrey@sitnik.ru