Skip to content

Obtain a promise that's resolved upon the next CSS Transition / Animation

Notifications You must be signed in to change notification settings

medialize/jQuery-transitionEndPromise

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Obtain a promise that's resolved upon the next CSS Transition / Animation

Resources

Stars

Watchers

Forks

Packages

No packages published