Animator
Manages one or more style transitions or other Animator instances. Unlike typical
config objects, the config object for this class is a mixture of config properties and style names that define
style transitions.
For example:
const anim = Animator.run({
element,
duration : 500,
// style transitions:
opacity : 0
});
await anim.done();
The static run method is typically used (as above) instead of the new Animator() style for
brevity (since a manually created Animator must also be manually started).
An Animator can be awaited and will resolve once all of its transitions and/or child
animations complete or are aborted (via destroy()).
Compound Transitions
The following custom transitions can present in the Animator config object as if they were normal style transitions:
For example:
const anim = Animator.run({
element,
marginLeft : -200,
puff : true // true for default scale, a number, or config object
});
Configs
8
Configs
8The optional delay before starting the animation. Numbers less than 10 are assumed to be seconds
(instead of milliseconds) unless the unit property is specified.
The duration of the animation. Numbers less than 10 are assumed to be seconds (instead of milliseconds)
unless the unit property is specified.
The element to animate.
A callback function called when the animation completes. This is called after restoring styles to the
original values (based on retain). When this function is provided, retain defaults to
false. By implementing this function, a CSS class can be applied to the element to
give the proper style, while the inline styles are removed (e.g., a hide animation based on opacity).
For example:
const anim = Animator.run({
element,
duration : 500,
opacity : 0,
finalize() {
element.classList.add('hidden');
}
});
await anim.done();
When passed at construction time, items can be an array of other Animator config objects. This can be
used to animate multiple elements and wait for this instance to be done.
Set to true to retain the style property values after the animation. This defaults to true if a
finalize function is not specified, and false otherwise. When a finalize function
is provided, it is typically to apply a CSS class to achieve the desired styling so that inline styles
can be removed.
The timing function for the animation.
The duration/delay unit (either 's' or 'ms').
Properties
8
Properties
8Class hierarchy
Other
This readonly property is set to true when the animation completes or false if the animation is
aborted (by calling the destroy() method).
An array containing a mixture of Animator and/or AnimatorTransition objects, depending on what was
specified at construction time.
Functions
18
Functions
18Other
Returns a Promise that resolves to a Boolean when this animation completes. The resolved value is that of
this instance's completed property.
A compound animation to achieve scale: 12 and opacity: 0. The scale defaults to 8 but can be set
in the anim config object.
For example
const puff = Animator.puff(element);
const puff = Animator.puff({
element,
scale : 12
});
This compound animation can also be specified in an Animator config object along with other style transitions:
const anim = Animator.run({
element,
marginLeft : -200,
puff : true // true for default scale, a number, or config object
});
| Parameter | Type | Description |
|---|---|---|
anim | Element | AnimatorConfig | Animator | Object | The element to animate or the config object containing at least
the |
anim.scale | Number | The scale value for the |
A short-hand way to create an Animator instance and call its start method.
const anim = Animator.run({
element,
duration : 500,
// style transitions:
opacity : 0
});
await anim.done();
| Parameter | Type | Description |
|---|---|---|
options | Animator | AnimatorConfig | A config object for an |