- Source:
Methods
transition(element, classChangesopt, nullable, styleChangesopt, nullable, rejectOnInterruptionopt, nullable) → {Basic.Deferred}
This method offers the possibility to apply CSS transitions via classes and/or styles and wait for the transition to finish, which results in the resolution of a Deferred.
In general, this method remedies the pain of having to manage transitions manually in JS, entering precise ms for timers waiting on conclusion of transitions.
The general principle of this is the parsing of transition CSS attributes, which may contain transition timings (transition and transition-duration) and looks for the longest currently running transition. Values are excepted as milliseconds or seconds (int or float notation).
Why would you do this, if there is something like the animationend event, you ask? Well, the problem is, that,
if the animation is interrupted or never finishes for any other reason, the event never fires. For that, there is
the animationcancel event, but that is not really robustly supported at the moment. So, in cases of complex
style changes, where we definitively want to have a callback when the animation has been (or would have been)
finished, this is still the safer option. But, for simple and small cases I'd strongly recommend using the native
AnimationEvent API.
Calling this method successively on the same element replaces the currently running transition, normally resulting in premature resolution of the Deferred and application of the newly provided changes.
Be advised, that legacy browsers like IE11 and Edge <= 18 have problems connecting interrupted transitions, especially when transition-durations change during animation, resulting in skipped or choppy animations. If you experience this, try to keep timings stable during animation and chain animations without overlap.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
element |
Element | the element to transition, by applying class and/or style changes |
||
classChanges |
Object |
<optional> <nullable> |
null | plain object containing class changes to apply, add classes via the "add" key, remove them via the "remove" key (add has precedence over remove); values may be standard CSS class string notation or an array of standard CSS class notations |
styleChanges |
Object |
<optional> <nullable> |
null | plain object containing style changes to apply (via applyStyles) |
rejectOnInterruption |
Boolean |
<optional> <nullable> |
false | if a new transition is applied using this function while a previous transition is still running the Deferred would normally be resolved before continuing, set this to true to let the Deferred reject in that case (the rejection message is "interrupted", access the element using "element) |
- Source:
- See:
Returns:
- Type
- Basic.Deferred
Example
transition(element, {add : 'foobar'}).then(element => { return transition(element, {remove : 'foobar'}); }).then(() => { console.log('finished'); });
transition(element, null, {top : 0, left : 0, background : 'pink', transition : 'all 1500ms'}).then(() => { console.log('finished'); });
transition(element, {add : 'foobar'}).then(() => { console.log('finished'); }).catch(error => { console.log('cancelled'); });