Correctly adds new transitions to an element with already running transitions.

Provides the onTransitionEnd callback that is called not only when the transition was finished,
but also when the transition was halted. For example, when a transition is manually stopped (not yet implemented)
or another transition with the same transition property started on the same element.

All transitions scheduled in the same JavaScript execution context stack will be started together in a
separate execution context stack.

Array of transition properties and transition values. The first three values are
required and must be specified in the following order: a CSS transition property
name, a value to transition "from" and a value to transition "to". The rest of the
values (duration, delay, timing function and onTransitionEnd callback) are optional
and their order conforms to the CSS
transition
property specification: the first value that can be parsed as a time is assigned to
the transition-duration, and the second value that can be parsed as a time is
assigned to transition-delay.

String: "opacity 0 1 1s linear 0s"

String with space separated transition properties and transition values. The order and
the requirements of the values in this string must follow the same rules defined for the
values specified inside an array. Due to its nature, this form does not allow specifying
the onTransitionEnd callback.
Note: some CSS properties (e.g.: transform) can themselves receive a space separated values
such as transform: translateX(200px) rotate(180deg);. In this case, you
should use the "Array" form.

Object: {property: "opacity", from: "0", to: "1"}

Using this form, you can specify all the properties you can specify using the
array form (property name, from value, to value,
duration, delay, timingFunction and onTransitionEnd callback).
But also the beginFromCurrentValue flag, see examples below for more info.

Array of Arrays, Strings or Objects

Array of Arrays, Strings or Objects, each specifying single transition property. This
form allows transitioning multiple transition properties on a single element at once:["opacity 0 1 1s", ["color", "red", "blue", "500ms"]]

options

Transition options object with the following optional fields:

onTransitionEnd

A callback function that is called when all transition properties have
finished their transitions. Receives two parameters, element and finished.
The finished parameter will be false if the transition was stopped
or one of the transitioned properties was used in a new transition.

onBeforeChangeStyle

A callback function that is called before the new CSS property value is applied to the element.
This callback tries to mimic the before-change style
event.

onAfterChangeStyle

A callback function that is called after the new CSS property value is applied to the element.
This callback tries to mimic the after-change style
event.

beginFromCurrentValue

Sets the default beginFromCurrentValue value for properties that do not
specify their own beginFromCurrentValue value. See examples below for more
info.

duration

Sets the default transition-duration
for the transition properties that do not specify their own duration. Default is 400ms.

delay

Sets the default transition-delay
for the transition properties that do not specify their own delay. Default is 0s.

timingFunction

Sets the default transition-timing-function
for the transition properties that do not specify their own timing-function. Default is ease.

Returns

An object with a promise field holding a Promise that will be resolved when the transition ends.
In a similar way to the onFulfilled callback, the promise resolves with an object having two
fields: the animated element and the finished flag that indicating if the
transition finished animating.

Examples

Single property transition

To perform CSS transition on a single property of an element, specify the element and the
array with transition values.

If some or all properties share the same transition values like duration or timing function,
you can pass these values inside the third options argument. Transition
values specified for a specific transition property will override shared transition values.

Sometimes it may be easier to transition multiple properties of the same element from
different begin calls. Yet, keeping the requirement that all properties begin their
transitions simultaneously. Transition.js ensures that all transitions executed in the same JavaScript
execution context stack will be started together in a separate execution context stack.

The onTransitionEnd callback is fired when all properties finish their
transitions. This callback receives two parameters: an element on which the
transition was performed, and a boolean flag finished specifying if the
transition was finished by reaching its target value (true), or halted (false),
for example when another transition with the same transition properties has began.

Every property can have its own onTransitionEnd callback which is executed as
soon as the property finish its transition. Similarly to transition's onTransitionEnd
callback, this callback sldo receives two parameters, the element and the finished flag.

The onBeforeChangeStyle callback is called after the "from" values
of all transition properties were set on the element and before setting the "to" and transition
values. It receives single parameter, the element, on which the transition is performed.
This callback tries to mimic the behaviour of the before-change style
event. This callback is useful when additional element manipulation is required before
beginning the transition, for example setting element's display value to block
when performing fade-in transition.

Sometimes, when beginning new transition with a property that is already being transitioned, it is
desired to transition that property from its current value. For example, assume you have two transitions,
"fadeIn" and "fadeOut" transitioning values of the "opacity" from 0 to 1 and from 1 to 0 respectively.
To ensure these transitions transition opacity from its current value, set the
beginFromCurrentValue option to true.