A JavaScript library that provides a convenient way to create CSS transitions pragmatically
MIT License
A JavaScript library that provides a convenient way to create CSS transitions pragmatically.
onTransitionEnd
callbacks.Visit http://transitionjs.org for more info and examples.
Following code fades out an element by transitioning its opacity
from 1
to 0
and its scale
from 1
to 0.5
. Both properties transitioned with a duration of 400 milliseconds. After transition finishes, the element's display
is set to none
.
transition.begin(element, [
"opacity 1 0",
"transform scale(1) scale(0.5)"
], {
// Duration of 400ms is used both for opacity and transform
duration: "400ms",
onTransitionEnd: function(element, finished) {
// if transition will be halted in the middle, finished will equal to false
if (finished) {
// If the transition was finished naturally, hide the element.
element.style.display = "none";
}
}
}
);
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:
[propertyName, fromValue, toValue[, duration, timingFunction, delay, onTransitionEnd]]
["opacity", "0", "1", "1s", "linear", "0s", onTransitionEndCallback]
`${propertyName} ${fromValue} ${toValue}[ ${duration} ${timingFunction} ${delay}]`
"opacity 0 1 1s linear 0s"
onTransitionEnd
callback.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). In addition, you can specify the beginFromCurrentValue
flag. Visit http://transitionjs.org for more info and examples.["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.
transition.begin(element, "opacity 1 0 2s").promise.then(function(result) {
// result.element - the animated element
// result.finished - is the transition finished animating or was halted in the middle
});
function fadeOut(element) {
// Don't let fade out transition to finish, begin fading-in again in the middle of fade-out transition.
window.setTimeout(function() {
fadeIn(element);
}, 1000);
transition.begin(element, "opacity 1 0 2s", {
onTransitionEnd: function(element, finished) {
// Because we called fadeIn from within setTimeout with 1s, the fade-in transition will be halted
// in the middle and this callback will be invoked with finished set to "false".
if (finished) {
// This code never runs, because finished is false
element.parentNode.removeChild(element);
}
}
});
}
function fadeIn(element) {
transition.begin(element, "opacity 0 1 2s", {
// On successive runs, fadeIn is called from within setTimeout function while fade-out transition is running.
// Setting beginFromCurrentValue to true makes sure the new fade-in transition will continue the effect from
// the current opacity calue and not 0.
beginFromCurrentValue: true,
onBeforeChangeStyle: function(element) {
// When fading-in for the first time, add the element to the DOM right after the
// opacity is set to 0 but before transition properties are applied on the element.
if (!element.parentNode) {
document.body.appendChild(element);
}
},
onTransitionEnd: function(element, finished) {
// Fade out the element right after it had finished fading in.
fadeOut(element);
}
});
}
var element = document.createElement("div");
element.style.cssText = "position: absolute; top: 100px; left:100px; width: 100px; height: 100px; background: #ff0000";
fadeIn(element);