Animation.finish()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.

El método finish() de la interfaz Animation de la Web Animations API establece el tiempo de reproducción actual hasta el final de la animación correspondiente a la dirección de reproducción actual. Es decir, si la animación se está reproduciendo hacia adelante, establece el tiempo de reproducción a la longitud de la secuencia de animación, y si la animación se reproduce hacia atras, habiendo llamado a su método reverse(), establece el tiempo de la reproducción en 0.

Sintaxis

Animation.finish();

InvalidState: La velocidad de reproducción del reproductor es 0 o la velocidad de reproducción de la animación es mayor que 0 y el tiempo de finalización de la animación es infinito.

Ejemplos

El siguiente ejemplo muestra cómo usar el método finish() y captura un error InvalidState.

interfaceElement.addEventListener("mousedown", function() {
  try {
    player.finish();
  } catch(e if e instanceof InvalidState) {
    console.log("finish() called on paused or finished animation.");
  } catch(e);
    logMyErrors(e); //pasa el objeto excepción al manejador de errores.
  }
});

El siguiente ejemplo finaliza todas las animaciones en un solo elemento, independientemente de su dirección de reproducción.

elem.getAnimations().forEach(function (animation) {
  return animation.finish();
});

Especificaciones

Specification
Web Animations # dom-animation-finish

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también

Web Animations API
Animation para otros métodos y propiedades que puede usar para controlar la animación de la página web.
Animation.play() para reproducir una animación hacia adelante.
Animation.reverse() para reproducir una animación hacia atrás.