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

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.

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
   

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 andrey@sitnik.ru