@proyecto26/animatable-component
Version:
Animate once, use Everywhere! 💫
837 lines (836 loc) • 33.8 kB
JavaScript
import { h, Component, Element, Prop, Event, Method, Watch } from '@stencil/core';
import { getKeyFramesByAnimation } from '../../animations';
import { AnimationManager, clearPropsWithOptions, getElementToAnimate } from '../../utils';
/**
* animatable-component
*/
export class AnimatableComponent {
constructor() {
/**
* Animation manager for Animatable
*/
this.manager = null;
/**
* Start the animation when the component is mounted.
*/
this.autoPlay = false;
}
get element() {
return getElementToAnimate(this.el);
}
animationDidChangeHandler(animation) {
this.keyFrames = getKeyFramesByAnimation(animation);
}
/**
* Get keyFrames of the animation from string data.
* @param text - The string with the keyFrames of the animation.
*/
keyFramesDidChangeHandler(text) {
if (text !== undefined)
this.keyFrames = JSON.parse(text);
}
/**
* Get options of the animation from string data.
* @param text - The string with the options of the animation.
*/
optionsDidChangeHandler(options) {
clearPropsWithOptions(this, options);
}
/**
* Get options of the animation from string data.
* @param text - The string with the options of the animation.
*/
optionsDataDidChangeHandler(text) {
if (text !== undefined)
this.options = JSON.parse(text);
}
setCurrenTime(newValue) {
this.manager.currentAnimation.currentTime = newValue;
}
/**
* Returns the current time value of the animation in milliseconds, whether running or paused.
*/
async getCurrentTime() {
return Promise.resolve(this.manager.currentAnimation.currentTime);
}
setStartTime(newValue) {
this.manager.currentAnimation.startTime = newValue;
}
/**
* Returns the scheduled time when an animation's playback should begin.
*/
async getStartTime() {
return Promise.resolve(this.manager.currentAnimation.startTime);
}
/**
* Indicates whether the animation is currently waiting
* for an asynchronous operation such as initiating playback
* or pausing a running animation.
*/
async getPending() {
return Promise.resolve(this.manager.currentAnimation.pending);
}
setPlaybackRate(newValue) {
this.manager.currentAnimation.playbackRate = newValue;
}
/**
* Returns the playback rate of the animation.
*/
async getPlaybackRate() {
return Promise.resolve(this.manager.currentAnimation.playbackRate);
}
/**
* Returns an enumerated value describing the playback state of an animation.
*/
async getPlayState() {
return Promise.resolve(this.manager.currentAnimation.playState);
}
/**
* Clears all `KeyframeEffects` caused by this animation and aborts its playback.
*/
async cancel() {
this.manager.currentAnimation.cancel();
}
/**
* Sets the current playback time to the end of the animation
* corresponding to the current playback direction.
*/
async finish() {
this.manager.currentAnimation.finish();
}
/**
* Suspends playback of the animation.
*/
async pause() {
this.manager.currentAnimation.pause();
}
/**
* Starts or resumes playing of an animation.
*/
async play() {
this.manager.playAnimation();
}
/**
* Reverses the playback direction, meaning the animation ends at its beginning.
*/
async reverse() {
this.manager.currentAnimation.reverse();
}
/**
* Clear the current animation
*/
async clear() {
this.manager.clearAnimation();
}
/**
* Destroy the current animation
*/
async destroy() {
if (this.manager !== null) {
this.manager.destroyAnimation();
}
}
/**
* Initialize manager
*/
connectedCallback() {
this.manager = new AnimationManager(this);
this.manager.setState(this.element, this);
}
componentDidLoad() {
this.manager.savedState();
}
componentShouldUpdate() {
this.manager.setState(this.element, this);
}
componentDidUpdate() {
this.manager.savedState();
}
disconnectedCallback() {
this.destroy();
}
render() {
return h("slot", null);
}
static get is() { return "animatable-component"; }
static get properties() { return {
"animation": {
"type": "string",
"mutable": false,
"complexType": {
"original": "AnimationsType",
"resolved": "\"none\" | \"bounce\" | \"flash\" | \"jello\" | \"pulse\" | \"rotate\" | \"shake\" | \"swing\" | \"rubberBand\" | \"tada\" | \"wobble\" | \"heartBeat\" | \"bounceIn\" | \"bounceInUp\" | \"bounceInDown\" | \"bounceOut\" | \"bounceOutUp\" | \"bounceOutDown\" | \"bounceOutRight\" | \"bounceOutLeft\" | \"fadeIn\" | \"fadeInUp\" | \"fadeInUpBig\" | \"fadeInDown\" | \"fadeInDownBig\" | \"fadeInRightBig\" | \"fadeInLeftBig\" | \"fadeOut\" | \"fadeOutUp\" | \"fadeOutUpBig\" | \"fadeOutDown\" | \"fadeOutDownBig\" | \"fadeOutRight\" | \"fadeOutRightBig\" | \"fadeOutLeft\" | \"fadeOutLeftBig\" | \"flip\" | \"flipInX\" | \"flipInY\" | \"flipOutX\" | \"flipOutY\" | \"lightSpeedIn\" | \"lightSpeedOut\" | \"rotateIn\" | \"rotateInClockwise\" | \"rotateInDownLeft\" | \"rotateInDownRight\" | \"rotateInUpLeft\" | \"rotateInUpRight\" | \"rotateOut\" | \"rotateOutClockwise\" | \"rotateOutDownLeft\" | \"rotateOutDownRight\" | \"rotateOutUpLeft\" | \"rotateOutUpRight\" | \"slideInUp\" | \"slideInDown\" | \"slideOutUp\" | \"slideOutDown\" | \"slideOutLeft\" | \"slideOutRight\" | \"zoomIn\" | \"zoomInUp\" | \"zoomInDown\" | \"zoomInLeft\" | \"zoomInRight\" | \"zoomOut\" | \"zoomOutUp\" | \"zoomOutDown\" | \"zoomOutLeft\" | \"zoomOutRight\" | \"hinge\" | \"jackInTheBox\" | \"rollIn\" | \"rollOut\" | \"scale-up-center\" | \"scale-up-top\" | \"scale-up-tr\" | \"scale-up-right\" | \"scale-up-br\" | \"scale-up-bottom\" | \"scale-up-bl\" | \"scale-up-left\" | \"scale-up-tl\" | \"scale-up-hor-center\" | \"scale-up-hor-left\" | \"scale-up-hor-right\" | \"scale-up-ver-center\" | \"scale-up-ver-top\" | \"scale-up-ver-bottom\" | \"scale-down-center\" | \"scale-down-top\" | \"scale-down-tr\" | \"scale-down-right\" | \"scale-down-br\" | \"scale-down-bottom\" | \"scale-down-bl\" | \"scale-down-left\" | \"scale-down-tl\" | \"scale-down-hor-center\" | \"scale-down-hor-left\" | \"scale-down-hor-right\" | \"scale-down-ver-center\" | \"scale-down-ver-top\" | \"scale-down-ver-bottom\" | \"rotate-center\" | \"rotate-top\" | \"rotate-tr\" | \"rotate-right\" | \"rotate-br\" | \"rotate-bottom\" | \"rotate-bl\" | \"rotate-left\" | \"rotate-tl\" | \"rotate-hor-center\" | \"rotate-hor-top\" | \"rotate-hor-bottom\" | \"rotate-vert-center\" | \"rotate-vert-left\" | \"rotate-vert-right\" | \"rotate-diagonal-1\" | \"rotate-diagonal-2\" | \"rotate-diagonal-tr\" | \"rotate-diagonal-br\" | \"rotate-diagonal-bl\" | \"rotate-diagonal-tl\" | \"rotate-scale-up\" | \"rotate-scale-down\" | \"rotate-scale-up-hor\" | \"rotate-scale-down-hor\" | \"rotate-scale-up-ver\" | \"rotate-scale-down-ver\" | \"rotate-scale-up-diag-1\" | \"rotate-scale-down-diag-1\" | \"rotate-scale-up-diag-2\" | \"rotate-scale-down-diag-2\" | \"rotate-90-cw\" | \"rotate-90-ccw\" | \"rotate-90-top-cw\" | \"rotate-90-top-ccw\" | \"rotate-90-tr-cw\" | \"rotate-90-tr-ccw\" | \"rotate-90-right-cw\" | \"rotate-90-right-ccw\" | \"rotate-90-br-cw\" | \"rotate-90-br-ccw\" | \"rotate-90-bottom-cw\" | \"rotate-90-bottom-ccw\" | \"rotate-90-bl-cw\" | \"rotate-90-bl-ccw\" | \"rotate-90-left-cw\" | \"rotate-90-left-ccw\" | \"rotate-90-tl-cw\" | \"rotate-90-tl-ccw\" | \"rotate-90-horizontal-fwd\" | \"rotate-90-horizontal-bck\" | \"rotate-90-vertical-fwd\" | \"rotate-90-vertical-bck\" | \"flip-horizontal-bottom\" | \"flip-horizontal-top\" | \"flip-horizontal-bck\" | \"flip-horizontal-fwd\" | \"flip-vertical-right\" | \"flip-vertical-left\" | \"flip-vertical-bck\" | \"flip-vertical-fwd\" | \"flip-diagonal-1-tr\" | \"flip-diagonal-1-bl\" | \"flip-diagonal-1-bck\" | \"flip-diagonal-1-fwd\" | \"flip-diagonal-2-br\" | \"flip-diagonal-2-tl\" | \"flip-diagonal-2-bck\" | \"flip-diagonal-2-fwd\" | \"flip-2-hor-top-1\" | \"flip-2-hor-top-2\" | \"flip-2-hor-top-bck\" | \"flip-2-hor-top-fwd\" | \"flip-2-ver-right-1\" | \"flip-2-ver-right-2\" | \"flip-2-ver-right-bck\" | \"flip-2-ver-right-fwd\" | \"flip-2-hor-bottom-1\" | \"flip-2-hor-bottom-2\" | \"flip-2-hor-bottom-bck\" | \"flip-2-hor-bottom-fwd\" | \"flip-2-ver-left-1\" | \"flip-2-ver-left-2\" | \"flip-2-ver-left-bck\" | \"flip-2-ver-left-fwd\" | \"flip-scale-up-hor\" | \"flip-scale-down-hor\" | \"flip-scale-up-ver\" | \"flip-scale-down-ver\" | \"flip-scale-up-diag-1\" | \"flip-scale-down-diag-1\" | \"flip-scale-up-diag-2\" | \"flip-scale-down-diag-2\" | \"flip-scale-2-hor-top\" | \"flip-scale-2-ver-right\" | \"flip-scale-2-hor-bottom\" | \"flip-scale-2-ver-left\" | \"swing-top-fwd\" | \"swing-top-bck\" | \"swing-top-right-fwd\" | \"swing-top-right-bck\" | \"swing-right-fwd\" | \"swing-right-bck\" | \"swing-bottom-right-fwd\" | \"swing-bottom-right-bck\" | \"swing-bottom-fwd\" | \"swing-bottom-bck\" | \"swing-bottom-left-fwd\" | \"swing-bottom-left-bck\" | \"swing-left-fwd\" | \"swing-left-bck\" | \"swing-top-left-fwd\" | \"swing-top-left-bck\" | \"slide-top\" | \"slide-tr\" | \"slide-right\" | \"slide-br\" | \"slide-bottom\" | \"slide-bl\" | \"slide-left\" | \"slide-tl\" | \"slide-bck-center\" | \"slide-bck-top\" | \"slide-bck-tr\" | \"slide-bck-right\" | \"slide-bck-br\" | \"slide-bck-bottom\" | \"slide-bck-bl\" | \"slide-bck-left\" | \"slide-bck-tl\" | \"slide-fwd-center\" | \"slide-fwd-top\" | \"slide-fwd-tr\" | \"slide-fwd-right\" | \"slide-fwd-br\" | \"slide-fwd-bottom\" | \"slide-fwd-bl\" | \"slide-fwd-left\" | \"slide-fwd-tl\" | \"slide-rotate-hor-top\" | \"slide-rotate-hor-t-bck\" | \"slide-rotate-hor-t-fwd\" | \"slide-rotate-ver-right\" | \"slide-rotate-ver-r-bck\" | \"slide-rotate-ver-r-fwd\" | \"slide-rotate-hor-bottom\" | \"slide-rotate-hor-b-bck\" | \"slide-rotate-hor-b-fwd\" | \"slide-rotate-ver-left\" | \"slide-rotate-ver-l-bck\" | \"slide-rotate-ver-l-fwd\" | \"shadow-drop-center\" | \"shadow-drop-top\" | \"shadow-drop-right\" | \"shadow-drop-bottom\" | \"shadow-drop-left\" | \"shadow-drop-lr\" | \"shadow-drop-tb\" | \"shadow-drop-tr\" | \"shadow-drop-br\" | \"shadow-drop-bl\" | \"shadow-drop-tl\" | \"shadow-drop-2-center\" | \"shadow-drop-2-top\" | \"shadow-drop-2-right\" | \"shadow-drop-2-bottom\" | \"shadow-drop-2-left\" | \"shadow-drop-2-lr\" | \"shadow-drop-2-tb\" | \"shadow-drop-2-tr\" | \"shadow-drop-2-br\" | \"shadow-drop-2-bl\" | \"shadow-drop-2-tl\" | \"shadow-pop-tr\" | \"shadow-pop-br\" | \"shadow-pop-bl\" | \"shadow-pop-tl\" | \"shadow-inset-center\" | \"shadow-inset-top\" | \"shadow-inset-right\" | \"shadow-inset-bottom\" | \"shadow-inset-left\" | \"shadow-inset-lr\" | \"shadow-inset-tb\" | \"shadow-inset-tr\" | \"shadow-inset-br\" | \"shadow-inset-bl\" | \"shadow-inset-tl\" | \"scale-in-center\" | \"scale-in-top\" | \"scale-in-tr\" | \"scale-in-right\" | \"scale-in-br\" | \"scale-in-bottom\" | \"scale-in-bl\" | \"scale-in-left\" | \"scale-in-tl\" | \"scale-in-hor-center\" | \"scale-in-hor-left\" | \"scale-in-hor-right\" | \"scale-in-ver-center\" | \"scale-in-ver-top\" | \"scale-in-ver-bottom\" | \"rotate-in-center\" | \"rotate-in-top\" | \"rotate-in-tr\" | \"rotate-in-right\" | \"rotate-in-br\" | \"rotate-in-bottom\" | \"rotate-in-bl\" | \"rotate-in-left\" | \"rotate-in-tl\" | \"rotate-in-hor\" | \"rotate-in-ver\" | \"rotate-in-diag-1\" | \"rotate-in-diag-2\" | \"rotate-in-2-cw\" | \"rotate-in-2-ccw\" | \"rotate-in-2-fwd-cw\" | \"rotate-in-2-fwd-ccw\" | \"rotate-in-2-bck-cw\" | \"rotate-in-2-bck-ccw\" | \"rotate-in-2-tr-cw\" | \"rotate-in-2-tr-ccw\" | \"rotate-in-2-br-cw\" | \"rotate-in-2-br-ccw\" | \"rotate-in-2-bl-cw\" | \"rotate-in-2-bl-ccw\" | \"rotate-in-2-tl-cw\" | \"rotate-in-2-tl-ccw\" | \"swirl-in-fwd\" | \"swirl-in-bck\" | \"swirl-in-top-fwd\" | \"swirl-in-top-bck\" | \"swirl-in-tr-fwd\" | \"swirl-in-tr-bck\" | \"swirl-in-right-fwd\" | \"swirl-in-right-bck\" | \"swirl-in-br-fwd\" | \"swirl-in-br-bck\" | \"swirl-in-bottom-fwd\" | \"swirl-in-bottom-bck\" | \"swirl-in-bl-fwd\" | \"swirl-in-bl-bck\" | \"swirl-in-left-fwd\" | \"swirl-in-left-bck\" | \"swirl-in-tl-fwd\" | \"swirl-in-tl-bck\" | \"flip-in-hor-bottom\" | \"flip-in-hor-top\" | \"flip-in-ver-right\" | \"flip-in-ver-left\" | \"flip-in-diag-1-tr\" | \"flip-in-diag-1-bl\" | \"flip-in-diag-2-tl\" | \"flip-in-diag-2-br\" | \"slit-in-vertical\" | \"slit-in-horizontal\" | \"slit-in-diagonal-1\" | \"slit-in-diagonal-2\" | \"slide-in-top\" | \"slide-in-tr\" | \"slide-in-right\" | \"slide-in-br\" | \"slide-in-bottom\" | \"slide-in-bl\" | \"slide-in-left\" | \"slide-in-tl\" | \"slide-in-fwd-center\" | \"slide-in-fwd-top\" | \"slide-in-fwd-tr\" | \"slide-in-fwd-right\" | \"slide-in-fwd-br\" | \"slide-in-fwd-bottom\" | \"slide-in-fwd-bl\" | \"slide-in-fwd-left\" | \"slide-in-fwd-tl\" | \"slide-in-bck-center\" | \"slide-in-bck-top\" | \"slide-in-bck-tr\" | \"slide-in-bck-right\" | \"slide-in-bck-br\" | \"slide-in-bck-bottom\" | \"slide-in-bck-bl\" | \"slide-in-bck-left\" | \"slide-in-bck-tl\" | \"slide-in-blurred-top\" | \"slide-in-blurred-tr\" | \"slide-in-blurred-right\" | \"slide-in-blurred-br\" | \"slide-in-blurred-bottom\" | \"slide-in-blurred-bl\" | \"slide-in-blurred-left\" | \"slide-in-blurred-tl\" | \"slide-in-elliptic-top-fwd\" | \"slide-in-elliptic-top-bck\" | \"slide-in-elliptic-right-fwd\" | \"slide-in-elliptic-right-bck\" | \"slide-in-elliptic-bottom-fwd\" | \"slide-in-elliptic-bottom-bck\" | \"slide-in-elliptic-left-fwd\" | \"slide-in-elliptic-left-bck\" | \"bounce-in-top\" | \"bounce-in-right\" | \"bounce-in-bottom\" | \"bounce-in-left\" | \"bounce-in-fwd\" | \"bounce-in-bck\" | \"roll-in-left\" | \"roll-in-top\" | \"roll-in-right\" | \"roll-in-bottom\" | \"roll-in-blurred-left\" | \"roll-in-blurred-top\" | \"roll-in-blurred-right\" | \"roll-in-blurred-bottom\" | \"tilt-in-top-1\" | \"tilt-in-top-2\" | \"tilt-in-tr\" | \"tilt-in-right-1\" | \"tilt-in-right-2\" | \"tilt-in-br\" | \"tilt-in-bottom-1\" | \"tilt-in-bottom-2\" | \"tilt-in-bl\" | \"tilt-in-left-1\" | \"tilt-in-left-2\" | \"tilt-in-tl\" | \"tilt-in-fwd-tr\" | \"tilt-in-fwd-br\" | \"tilt-in-fwd-bl\" | \"tilt-in-fwd-tl\" | \"swing-in-top-fwd\" | \"swing-in-top-bck\" | \"swing-in-right-fwd\" | \"swing-in-right-bck\" | \"swing-in-bottom-fwd\" | \"swing-in-bottom-bck\" | \"swing-in-left-fwd\" | \"swing-in-left-bck\" | \"fade-in-fwd\" | \"fade-in-bck\" | \"fade-in-top\" | \"fade-in-tr\" | \"fade-in-right\" | \"fade-in-br\" | \"fade-in-bottom\" | \"fade-in-bl\" | \"fade-in-left\" | \"fade-in-tl\" | \"puff-in-center\" | \"puff-in-top\" | \"puff-in-tr\" | \"puff-in-right\" | \"puff-in-br\" | \"puff-in-bottom\" | \"puff-in-bl\" | \"puff-in-left\" | \"puff-in-tl\" | \"puff-in-hor\" | \"puff-in-ver\" | \"flicker-in-1\" | \"flicker-in-2\" | \"tracking-in-expand\" | \"tracking-in-expand-fwd\" | \"tracking-in-expand-fwd-top\" | \"tracking-in-expand-fwd-bottom\" | \"tracking-in-contract\" | \"tracking-in-contract-bck\" | \"tracking-in-contract-bck-top\" | \"tracking-in-contract-bck-bottom\" | \"text-focus-in\" | \"focus-in-expand\" | \"focus-in-expand-fwd\" | \"focus-in-contract\" | \"focus-in-contract-bck\" | \"text-shadow-drop-center\" | \"text-shadow-drop-top\" | \"text-shadow-drop-tr\" | \"text-shadow-drop-right\" | \"text-shadow-drop-br\" | \"text-shadow-drop-bottom\" | \"text-shadow-drop-bl\" | \"text-shadow-drop-left\" | \"text-shadow-drop-tl\" | \"text-shadow-pop-top\" | \"text-shadow-pop-tr\" | \"text-shadow-pop-right\" | \"text-shadow-pop-br\" | \"text-shadow-pop-bottom\" | \"text-shadow-pop-bl\" | \"text-shadow-pop-left\" | \"text-shadow-pop-tl\" | \"text-pop-up-top\" | \"text-pop-up-tr\" | \"text-pop-up-right\" | \"text-pop-up-br\" | \"text-pop-up-bottom\" | \"text-pop-up-bl\" | \"text-pop-up-left\" | \"text-pop-up-tl\" | \"vibrate-1\" | \"vibrate-2\" | \"shake-horizontal\" | \"shake-vertical\" | \"shake-lr\" | \"shake-top\" | \"shake-tr\" | \"shake-right\" | \"shake-br\" | \"shake-bottom\" | \"shake-bl\" | \"shake-left\" | \"shake-tl\" | \"jello-horizontal\" | \"jello-vertical\" | \"jello-diagonal-1\" | \"jello-diagonal-2\" | \"wobble-hor-bottom\" | \"wobble-hor-top\" | \"wobble-ver-left\" | \"wobble-ver-right\" | \"bounce-top\" | \"bounce-bottom\" | \"bounce-left\" | \"bounce-right\" | \"pulsate-bck\" | \"pulsate-fwd\" | \"ping\" | \"ken-burns-top\" | \"ken-burns-top-right\" | \"ken-burns-right\" | \"ken-burns-bottom-right\" | \"ken-burns-bottom\" | \"ken-burns-bottom-left\" | \"ken-burns-left\" | \"ken-burns-top-left\" | \"bg-pan-left\" | \"bg-pan-right\" | \"bg-pan-top\" | \"bg-pan-bottom\" | \"bg-pan-tr\" | \"bg-pan-br\" | \"bg-pan-bl\" | \"bg-pan-tl\"",
"references": {
"AnimationsType": {
"location": "import",
"path": "../../animations"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Name of the animation to get the keyFrames"
},
"attribute": "animation",
"reflect": false
},
"keyFrames": {
"type": "unknown",
"mutable": true,
"complexType": {
"original": "Keyframe[]",
"resolved": "Keyframe[]",
"references": {
"Keyframe": {
"location": "global"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Keyframes of the animation."
}
},
"keyFramesData": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Keyframes of the animation in string format."
},
"attribute": "key-frames-data",
"reflect": false
},
"options": {
"type": "unknown",
"mutable": true,
"complexType": {
"original": "KeyframeAnimationOptions",
"resolved": "KeyframeAnimationOptions",
"references": {
"KeyframeAnimationOptions": {
"location": "global"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Default options of the animation."
}
},
"optionsData": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Default options of the animation in string format."
},
"attribute": "options-data",
"reflect": false
},
"animateId": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "A DOMString with which to reference the animation."
},
"attribute": "animate-id",
"reflect": false
},
"delay": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The number of milliseconds to delay the start of the animation.\nDefaults to 0."
},
"attribute": "delay",
"reflect": false
},
"endDelay": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The number of milliseconds to delay after the end of an animation."
},
"attribute": "end-delay",
"reflect": false
},
"duration": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The number of milliseconds each iteration of the animation takes to complete.\nDefaults to 0."
},
"attribute": "duration",
"reflect": false
},
"direction": {
"type": "string",
"mutable": true,
"complexType": {
"original": "PlaybackDirection",
"resolved": "\"alternate\" | \"alternate-reverse\" | \"normal\" | \"reverse\"",
"references": {
"PlaybackDirection": {
"location": "global"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Direction of the animation."
},
"attribute": "direction",
"reflect": false
},
"composite": {
"type": "string",
"mutable": true,
"complexType": {
"original": "CompositeOperation",
"resolved": "\"accumulate\" | \"add\" | \"replace\"",
"references": {
"CompositeOperation": {
"location": "global"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Determines how values are combined between this animation and other,\nseparate animations that do not specify their own specific composite operation.\nDefaults to `replace`."
},
"attribute": "composite",
"reflect": false
},
"easing": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The rate of the animation's change over time."
},
"attribute": "easing",
"reflect": false
},
"fill": {
"type": "string",
"mutable": true,
"complexType": {
"original": "FillMode",
"resolved": "\"auto\" | \"backwards\" | \"both\" | \"forwards\" | \"none\"",
"references": {
"FillMode": {
"location": "global"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Dictates whether the animation's effects should be reflected\nby the element(s) prior to playing (\"backwards\"), retained after the animation\nhas completed playing (\"forwards\"), or both. Defaults to \"none\"."
},
"attribute": "fill",
"reflect": false
},
"iterations": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The number of times the animation should repeat.\nDefaults to `1`, and can also take a value of `Infinity` to make it repeat for as long as the element exists."
},
"attribute": "iterations",
"reflect": false
},
"iterationStart": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Describes at what point in the iteration the animation should start."
},
"attribute": "iteration-start",
"reflect": false
},
"iterationComposite": {
"type": "string",
"mutable": true,
"complexType": {
"original": "IterationCompositeOperation",
"resolved": "\"accumulate\" | \"replace\"",
"references": {
"IterationCompositeOperation": {
"location": "global"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Determines how values build from iteration to iteration in this animation."
},
"attribute": "iteration-composite",
"reflect": false
},
"autoPlay": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Start the animation when the component is mounted."
},
"attribute": "autoplay",
"reflect": true,
"defaultValue": "false"
},
"fromClassName": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The class name to be applied when the animation starts"
},
"attribute": "from-class-name",
"reflect": false
},
"toClassName": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The class name to be applied when the animation ends"
},
"attribute": "to-class-name",
"reflect": false
},
"currentTime": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Sets the current time value of the animation in milliseconds, whether running or paused."
},
"attribute": "current-time",
"reflect": false
},
"startTime": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Sets the scheduled time when an animation's playback should begin."
},
"attribute": "start-time",
"reflect": false
},
"playbackRate": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Sets the playback rate of the animation."
},
"attribute": "playback-rate",
"reflect": false
}
}; }
static get events() { return [{
"method": "onStart",
"name": "start",
"bubbles": false,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "This event is sent when the animation is going to play."
},
"complexType": {
"original": "HTMLElement",
"resolved": "HTMLElement",
"references": {
"HTMLElement": {
"location": "global"
}
}
}
}, {
"method": "onFinish",
"name": "finish",
"bubbles": false,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "This event is sent when the animation finishes playing."
},
"complexType": {
"original": "HTMLElement",
"resolved": "HTMLElement",
"references": {
"HTMLElement": {
"location": "global"
}
}
}
}, {
"method": "onCancel",
"name": "cancel",
"bubbles": false,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "This event is sent when the animation is cancelled."
},
"complexType": {
"original": "HTMLElement",
"resolved": "HTMLElement",
"references": {
"HTMLElement": {
"location": "global"
}
}
}
}]; }
static get methods() { return {
"getCurrentTime": {
"complexType": {
"signature": "() => Promise<number>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<number>"
},
"docs": {
"text": "Returns the current time value of the animation in milliseconds, whether running or paused.",
"tags": []
}
},
"getStartTime": {
"complexType": {
"signature": "() => Promise<number>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<number>"
},
"docs": {
"text": "Returns the scheduled time when an animation's playback should begin.",
"tags": []
}
},
"getPending": {
"complexType": {
"signature": "() => Promise<boolean>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<boolean>"
},
"docs": {
"text": "Indicates whether the animation is currently waiting\nfor an asynchronous operation such as initiating playback\nor pausing a running animation.",
"tags": []
}
},
"getPlaybackRate": {
"complexType": {
"signature": "() => Promise<number>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<number>"
},
"docs": {
"text": "Returns the playback rate of the animation.",
"tags": []
}
},
"getPlayState": {
"complexType": {
"signature": "() => Promise<AnimationPlayState>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
},
"AnimationPlayState": {
"location": "global"
}
},
"return": "Promise<AnimationPlayState>"
},
"docs": {
"text": "Returns an enumerated value describing the playback state of an animation.",
"tags": []
}
},
"cancel": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Clears all `KeyframeEffects` caused by this animation and aborts its playback.",
"tags": []
}
},
"finish": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Sets the current playback time to the end of the animation\ncorresponding to the current playback direction.",
"tags": []
}
},
"pause": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Suspends playback of the animation.",
"tags": []
}
},
"play": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Starts or resumes playing of an animation.",
"tags": []
}
},
"reverse": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Reverses the playback direction, meaning the animation ends at its beginning.",
"tags": []
}
},
"clear": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Clear the current animation",
"tags": []
}
},
"destroy": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Destroy the current animation",
"tags": []
}
}
}; }
static get elementRef() { return "el"; }
static get watchers() { return [{
"propName": "animation",
"methodName": "animationDidChangeHandler"
}, {
"propName": "keyFramesData",
"methodName": "keyFramesDidChangeHandler"
}, {
"propName": "options",
"methodName": "optionsDidChangeHandler"
}, {
"propName": "optionsData",
"methodName": "optionsDataDidChangeHandler"
}, {
"propName": "currentTime",
"methodName": "setCurrenTime"
}, {
"propName": "startTime",
"methodName": "setStartTime"
}, {
"propName": "playbackRate",
"methodName": "setPlaybackRate"
}]; }
}