transition.js is a JavaScript library that provides a convenient way to create CSS transitions pragmatically.
onTransitionEnd
callbacksonTransitionEnd
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.transition.begin(element, properties[, options])
The begin
method applies CSS transition effect on the passed element
using the passed properties
that define the transition effect.
element
The element on which the CSS transition effect will be applied.
properties
The transition properties of a single or multiple CSS transitions. This parameter can take several forms:
["opacity", "0", "1", "1s", "linear", "0s", onTransitionEndCallback]
"opacity 0 1 1s linear 0s"
onTransitionEnd
callback.transform
) can themselves receive a space separated values
such as transform: translateX(200px) rotate(180deg);
. In this case, you
should use the "Array" form.
{property: "opacity", from: "0", to: "1"}
property
name, from
value, to
value,
duration
, delay
, timingFunction
and onTransitionEnd
callback).
But also the beginFromCurrentValue
flag, see examples below for more info.
["opacity 0 1 1s", ["color", "red", "blue", "500ms"]]
options
Transition options object with the following optional fields:
onTransitionEnd
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
onAfterChangeStyle
beginFromCurrentValue
beginFromCurrentValue
value for properties that do not
specify their own beginFromCurrentValue
value. See examples below for more
info.
duration
400ms
.
delay
0s
.
timingFunction
ease
.
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.
function animate(element) { transition.begin(element, ["background-color", "#ffffff", "#ADB5C7", "500ms", "linear"]); }
function animate(element) { transition.begin(element, "background-color #ffffff #ADB5C7 500ms linear"); }
function animate(element) { transition.begin(element, { property: "background-color", from: "#ffffff", to: "#ADB5C7", duration: "500ms", timingFunction: "linear" }); }
function animate(element) { transition.begin(element, [ ["transform", "translateX(0)", "translateX(200px)", "1s", "ease-in-out"], ["background-color", "#ffffff", "#ADB5C7", "500ms", "linear"] ]); }
function animate(element) { transition.begin(element, [ "transform translateX(0) translateX(200px) 1s ease-in-out", "background-color #ffffff #ADB5C7 500ms linear" ]); }
options
argument. Transition
values specified for a specific transition property will override shared transition values.
function animate(element) { transition.begin(element, [ ["transform", "translateX(0)", "translateX(200px)"], ["background-color", "#ffffff", "#ADB5C7", "2s"] ], { // Both "transform" and "background-color" transitions will use "linear" timing function timingFunction: "linear", // Only "transform" will use "500ms" duration, the "background-color" transition defines // its own duration of "2s" duration: "500ms" }); }
begin
callsbegin
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.
function animate(element) { transition.begin(element, ["transform", "translateX(0) rotate(0)", "translateX(200px) rotate(180deg)", "1s", "ease-in-out"]); transition.begin(element, ["background-color", "#ffffff", "#ADB5C7", "1s", "ease-in-out"]); }
onTransitionEnd
callbackonTransitionEnd
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.
function animate(element, trFrom, trTo, clrFrom, clrTo, stop) { transition.begin(element, [ ["transform", "translateX(" + trFrom + ")", "translateX(" + trTo + ")"], ["background-color", clrFrom, clrTo] ], { duration: "1s", timingFunction: "ease-in-out", onTransitionEnd: function(element, finished) { if (!finished || stop) return; // Animate backwards by switching values animate(element, trTo, trFrom, clrTo, clrFrom, true); } }); }
onTransitionEnd
callbackonTransitionEnd
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.
function animate(element) { transition.begin(element, [ ["transform", "rotate(0)", "rotate(360deg)", "2s"], ["background-color", "#ffffff", "#ADB5C7", "1s", function(element, finished) { if (!finished) return; transition.begin(element, ["background-color", "#ADB5C7", "#ffffff", "1s"]); }] ], { timingFunction: "linear" }); }
onBeforeChangeStyle
callbackonBeforeChangeStyle
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.
function animate(element) { transition.begin(element, ["opacity 0 1 1s", "transform translateX(0) translateX(200px) 1s ease-in-out"], { onBeforeChangeStyle: function(element) { element.style.display = "block"; }, onTransitionEnd: function(element, finished) { if (!finished) return; element.style.display = "none"; } }); }
beginFromCurrentValue
option to true
.
function animate(element) { // Go ahead and click on the "animate" button while the previous transition is running. // The transition will begin from the current value of transform and not from 0 or 200px. if (element._side == "right") { element._side = "left"; transition.begin(element, "transform translateX(200px) translateX(0) 1s", { beginFromCurrentValue: true }); } else { element._side = "right"; transition.begin(element, "transform translateX(0) translateX(200px) 1s", { beginFromCurrentValue: true }); } }
function animate(element) { element.style.backgroundColor = "#ffffff"; transition.begin(element, "transform translateX(0) translateX(200px) 2s ease-in-out"); window.clearTimeout(element._timeout); element._timeout = window.setTimeout(function() { transition.begin(element, "background-color #ffffff #ADB5C7 1s linear"); }, 1000); }
function animate(element) { transition.begin(element, [ "transform translateX(0) translateX(200px) 2s ease-in-out", "background-color #ffffff #ADB5C7 1s linear 1s" ]); }