Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stevenvachon/jquery.transitionsend
Execute a callback when ALL css transitions have ended.
https://github.com/stevenvachon/jquery.transitionsend
event jquery transitions
Last synced: 2 months ago
JSON representation
Execute a callback when ALL css transitions have ended.
- Host: GitHub
- URL: https://github.com/stevenvachon/jquery.transitionsend
- Owner: stevenvachon
- Created: 2013-12-18T15:25:58.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2014-02-20T17:05:12.000Z (almost 11 years ago)
- Last Synced: 2024-10-04T19:43:28.400Z (3 months ago)
- Topics: event, jquery, transitions
- Language: JavaScript
- Homepage:
- Size: 211 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#jquery.transitionsend
> Execute a callback when *all* CSS transitions have ended.
## Getting Started
This plugin requires jQuery `~1.7.0` or Zepto `~1.1.2`
The `transitionsend` event is similar to the standard `transitionend` event, except that it is **only called once**—instead of once *per property*. This is especially useful for **advanced animation** where you are transitioning more than one property on any given element.
This plugin has been built to work with jQuery's [`on()`](http://api.jquery.com/on/), [`one()`](http://api.jquery.com/one/) and [`off()`](http://api.jquery.com/off/) functions instead of
a unique API. This **allows for abstraction**.
- - -
The event will be dispatched immediately without delay in these situations:
* Elements with no CSS transitions applied
* Browsers that do not support CSS transitions
- - -
*Note*: Current technology prohibits the ability to detect when a transition has been cancelled (by means of CSS or other). You will have to keep track of such things yourself.
## Usage
### Overview
It is recommended that you use `jQuery.one()` instead of `jQuery.on()` because the callback will only be
triggered once.
```js
$(selector).addClass("cool-transition");
$(selector).one("transitionsend", function()
{
// do something here
});
// Cancel event
$(selector).off("transitionsend");
```
### Reflow
A `reflow` function is also included. It "relayouts" elements, preparing them for an immediate repaint (or "rerender"). It comes in handy when adding a transition `className` to your newly created element and actually having the transition play.
```javascript
$("body").html('
');
$("#something").reflow();
$("#something").addClass("cool-transition");
// it animates!
```
## Release History
* 0.2.0 added AMD support
* 0.1.2 added Zepto support
* 0.1.1 renamed `repaint` to `reflow`
* 0.1.0 initial release
---
[](https://github.com/igrigorik/ga-beacon "Google Analytics") [](https://bitdeli.com/free)