Pour autant que j'aime la documentation, cela ressemble à définir le rappel de l'animation, il faut :

  1. Instancier l'animation
  2. Définir le rappel onfinish
  3. Jouer l'animation

Existe-t-il un moyen de faire les mêmes choses avec une expression comme ci-dessous ?

Snackbar.rootElement.animate([
  {
    opacity: 1,
    transform: "none"
  },
  {
    opacity: 0,
    transform: "translateY(-200%)"
  }
], {
  duration: 500,
  easing: "ease-in"
})
   // ↓ [Warning] It just a desired syntax, NOT A VALID SYNTAX
   .onfinish(() => {
      Snackbar.rootElement.remove();
   });
0
Takeshi Tokugawa YD 28 nov. 2021 à 04:55
@CertainPerformance, merci pour le commentaire. TypeScript me dit que la syntaxe onfinish?.((animaton: Animation, animationPlaybackEvent: AnimationPlaybackEvent) => {}) n'est pas valide. Je commenterai à nouveau en dessous de votre réponse.
 – 
Takeshi Tokugawa YD
28 nov. 2021 à 05:07

1 réponse

Meilleure réponse

onfinish est un setter, pas une méthode - si vous lui attribuez au lieu de l'appeler en tant que fonction, cela fonctionnera :

console.log('start');

const d = document.createElement('div');
const res = d.animate([
  {
    opacity: 1,
    transform: "none"
  },
  {
    opacity: 0,
    transform: "translateY(-200%)"
  }
], {
  duration: 500,
  easing: "ease-in"
})
   .onfinish = (() => {
      console.log('finished');
   });

Autre option, avec addEventListener :

console.log('start');

const d = document.createElement('div');
const res = d.animate([
  {
    opacity: 1,
    transform: "none"
  },
  {
    opacity: 0,
    transform: "translateY(-200%)"
  }
], {
  duration: 500,
  easing: "ease-in"
})
   .addEventListener('finish', () => {
      console.log('finished');
   });

Pour des raisons similaires, les éléments suivants ne fonctionnent pas :

const obj = {
  set foo(arg) {
    console.log('called foo');
  }
};

obj.foo(123);

Le setter peut être invoqué en lui attribuant, mais pas en l'appelant comme s'il s'agissait d'une fonction (même s'il est une fonction en interne).

1
CertainPerformance 28 nov. 2021 à 05:07
Merci pour la réponse! La deuxième solution fonctionne très bien. Selon les définitions des types TypeScript, le onfinish pourrait être le null (onfinish: ((this: Animation, ev: AnimationPlaybackEvent) => any) | null;) et dans mon cas, c'est comme.
 – 
Takeshi Tokugawa YD
28 nov. 2021 à 05:14