Obtain a promise that's resolved upon the next CSS Transition / Animation
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.editorconfig
.gitignore
.jshintrc
Gruntfile.js
README.md
bower.json
package.json

README.md

jQuery.transitionEndPromise

Convenience API for simple interfacing with CSS Transitions and CSS Animations.

Usage

This wrapper provides the same API for transitions and animations

Promise TransitionEnd Event

var $element = $('#selector');
// acquire a promise
var promise = $element.transitionEndPromise({
  // [optional] timeout in milliseconds the promise
  // is resolved regardless of transitionend event
  resolveTimeout: 1000,
  // [optional] timeout in milliseconds the promise
  // is rejected in case of no transitionend event
  rejectTimeout: 1000,
  // [optional] filter the transitionend events for 
  // the event that was triggered for the specified 
  // CSS property name
  name: 'width',
  // [optional] filter callback to apply to 
  // transitionend events, return true to resolve 
  // the promise return false to ignore the event
  filter: function(event) {
    return true;
  }
});

// use the promise any way you like
promise.then(function(event) {
  console.log("The transition ended", event);
});

// add a class (or set a style or something) that triggers a transition
$element.addClass('something');

Promise AnimationEnd Event

var $element = $('#selector');
// acquire a promise
var promise = $element.animationEndPromise({
  // [optional] timeout in milliseconds the promise
  // is resolved regardless of animationend event
  resolveTimeout: 1000,
  // [optional] timeout in milliseconds the promise
  // is rejected in case of no animationend event
  rejectTimeout: 1000,
  // [optional] filter the animationend events for 
  // the event that was triggered for the specified 
  // CSS Animation name
  name: 'width',
  // [optional] filter callback to apply to 
  // animationend events, return true to resolve 
  // the promise return false to ignore the event
  filter: function(event) {
    return true;
  }
});

// use the promise any way you like
promise.then(function(event) {
  console.log("The animation ended", event);
});

// add a class (or set a style or something) that triggers an animation
$element.addClass('something');

Install

# with bower
bower install jQuery-transitionEndPromise

# with npm #
npm install jquery-transitionendpromise

License

jQuery-transitionEndEvent is published under the MIT License.

Changelog

0.1.0 (June 23rd 2014)

  • Initial Version