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. Possible values are ‘normal’, ‘reverse’, ‘alternate’, and ‘alternate-reverse’. 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 built-in easing function or a custom easing function such as cubic-bezier(0, 1, .74, 1.16).
Built-in easings include: linear, ease, ease-in, ease-out, ease-in-out.
|
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. Possible values are ‘auto’, ‘none’, ‘forwards’, ‘backwards’, and ‘both’. |
FillMode
|
'auto'
|
|
iterations
|
The number of iterations to run before the animation completes. Use Infinity for continuous looping.
|
number
|
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, the name property will be ignored.
Allows defining custom animation keyframes instead of using built-in presets.
|
Keyframe[] | undefined
|
-
|
|
name
|
The name of the built-in animation preset to use. For custom animations, use the keyframes property instead.
Set to ‘none’ to disable animations.
|
string
|
'none'
|
|
play
|
Controls whether the animation is playing. When set to true, the animation plays; when false, it pauses.
This attribute will be automatically removed when the animation finishes or gets canceled.
|
|
boolean
|
false
|
playbackRate
playback-rate
|
Sets the animation’s playback rate. A value of 1 plays at normal speed, 2 plays twice as fast, and 0.5 plays at half speed.
Negative values play the animation in reverse. This value can be changed without causing the animation to restart.
|
number
|
1
|
|
currentTime
|
Sets the current animation time in milliseconds. Useful for seeking to a specific point in the animation. |
number
|
-
|
|
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(
)
|
Cancels the animation, clearing all keyframe effects and aborting its playback.
Emits a gstock-cancel-event when called. |
finish(
)
|
Immediately completes the animation, jumping to the end state based on the current playback direction.
Emits a gstock-finish-event when called. |
Aprende más sobre métodos .
Partes
| Nombre | Descripción |
|---|---|
base
|
The component’s base wrapper (slot container). |
Aprende más sobre partes CSS .