Animation
<gstock-animation>
|
GstockAnimation
API
Propiedades
| Nombre | Descripción | Reflects | Tipo | Por defecto |
|---|---|---|---|---|
delay
|
The number of milliseconds to delay the start of the animation. |
number
|
0
|
|
direction
|
Determines the direction of playback as well as the behavior when reaching the end of an iteration. Learn more |
PlaybackDirection
|
'normal'
|
|
duration
|
The number of milliseconds each iteration of the animation takes to complete. |
number
|
1000
|
|
easing
|
The easing function to use for the animation. This can be a easing
function or a custom easing function such as
cubic-bezier(0, 1, .74, 1.16).
|
string
|
'linear'
|
|
endDelay
end-delay
|
The number of milliseconds to delay after the active period of an animation sequence. |
number
|
0
|
|
fill
|
Sets how the animation applies styles to its target before and after its execution. |
FillMode
|
'auto'
|
|
iterations
|
The number of iterations to run before the animation completes. Defaults
to Infinity, which loops.
|
-
|
Infinity
|
|
iterationStart
iteration-start
|
The offset at which to start the animation, usually between 0 (start) and 1 (end). |
number
|
0
|
|
keyframes
|
The keyframes to use for the animation. If this is set,
name will be ignored.
|
Keyframe[] | undefined
|
-
|
|
name
|
The name of the built-in animation to use. For custom animations, use the
keyframes prop.
|
string
|
'none'
|
|
play
|
Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when the animation finishes or gets canceled. |
|
boolean
|
false
|
playbackRate
playback-rate
|
Sets the animation’s playback rate. The default is 1, which
plays the animation at a normal speed. Setting this to 2, for
example, will double the animation’s speed. A negative value can be used
to reverse the animation. This value can be changed without causing the
animation to restart.
|
number
|
1
|
|
currentTime
|
Sets the current animation time. |
CSSNumberish
|
-
|
|
updateComplete
|
A read-only promise that resolves when the component has finished updating. |
Aprende más sobre atributos y propiedades .
Eventos
| Nombre | React Event | Descripción | Event Detail |
|---|---|---|---|
gstock-start-event
|
onGstockStartEvent
|
Emitted when the animation starts or restarts. | - |
gstock-cancel-event
|
onGstockCancelEvent
|
Emitted when the animation is canceled. | - |
gstock-finish-event
|
onGstockFinishEvent
|
Emitted when the animation finishes. | - |
Aprende más sobre eventos .
Slots
| Nombre | Descripción |
|---|---|
default
|
The element to animate. Avoid slotting in more than one element, as
subsequent ones will be ignored. To animate multiple elements, either wrap
them in a single container or use multiple
<gstock-animation> elements.
|
Aprende más sobre slots .
Métodos
| Nombre | Descripción |
|---|---|
cancel( )
|
Clears all keyframe effects caused by this animation and aborts its playback. |
finish( )
|
Sets the playback time to the end of the animation corresponding to the current playback direction. |
Aprende más sobre métodos .