Animations

Choix de technologie

Les animations sont souvent utilisées pour dynamiser les applications. Les navigateurs modernes offrent une bonne prise en charge des animations CSS, et il existe diverses bibliothèques qui fournissent des animations rapides basées sur JavaScript. Une API Web est également en cours de développement, accompagnée d'un polyfill pour ceux qui souhaitent utiliser les dernières technologies.

Mithril.js ne fournit pas d'API d'animation intégrée, car les options mentionnées ci-dessus sont généralement suffisantes pour créer des animations riches et complexes. Cependant, Mithril.js offre des hooks pour simplifier l'implémentation d'animations dans des cas spécifiques où cela peut s'avérer traditionnellement difficile.

Animation lors de la création d'un élément

Animer un élément via CSS lors de sa création est très simple :

.fancy {
  animation: fade-in 0.5s;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

var FancyComponent = {
  view: function () {
    return m('.fancy', 'Hello world');
  },
};

m.mount(document.body, FancyComponent);

Animation lors de la suppression d'un élément

Le défi lors de l'animation avant la suppression d'un élément est de s'assurer que l'élément n'est supprimé qu'une fois l'animation terminée. Heureusement, Mithril.js offre le hook onbeforeremove qui permet de retarder la suppression d'un élément.

Créons une animation exit qui fait passer l'opacité de 1 à 0.

.exit {
  animation: fade-out 0.5s;
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

Créons maintenant un composant de démonstration qui affiche et masque le FancyComponent que nous avons créé dans la section précédente :

var on = true;

var Toggler = {
  view: function () {
    return [
      m(
        'button',
        {
          onclick: function () {
            on = !on;
          },
        },
        'Toggle'
      ),
      on ? m(FancyComponent) : null,
    ];
  },
};

Modifions ensuite FancyComponent pour qu'il s'estompe lors de sa suppression :

var FancyComponent = {
  onbeforeremove: function (vnode) {
    vnode.dom.classList.add('exit');
    return new Promise(function (resolve) {
      vnode.dom.addEventListener('animationend', resolve);
    });
  },
  view: function () {
    return m('.fancy', 'Hello world');
  },
};

vnode.dom fait référence à l'élément DOM racine du composant (<div class="fancy">). Nous utilisons ici l'API classList de JavaScript pour ajouter la classe exit à <div class="fancy">.

Ensuite, nous retournons une Promise qui se résout lorsque l'événement animationend est déclenché. Lorsque nous retournons une Promise depuis onbeforeremove, Mithril.js attend que la Promise soit résolue avant de supprimer l'élément. Dans ce cas, il attend la fin de l'animation de sortie.

Nous pouvons vérifier que les animations d'entrée et de sortie fonctionnent correctement en montant le composant Toggler :

m.mount(document.body, Toggler);

Le hook onbeforeremove se déclenche uniquement sur l'élément qui perd son parentNode lorsqu'il est détaché du DOM. Ce comportement est intentionnel et vise à éviter une expérience utilisateur désagréable : que chaque animation de sortie imaginable sur la page s'exécute lors d'un changement de route. Si votre animation de sortie ne fonctionne pas, assurez-vous d'attacher le gestionnaire onbeforeremove au niveau le plus élevé possible dans l'arborescence pour vous assurer que votre code d'animation est appelé.

Performance

Lors de la création d'animations, il est recommandé d'utiliser uniquement les règles CSS opacity et transform, car elles peuvent être accélérées matériellement par les navigateurs modernes et offrent de meilleures performances que l'animation des propriétés top, left, width et height.

Il est également recommandé d'éviter la règle box-shadow et les sélecteurs comme :nth-child, car ils sont également gourmands en ressources. Si vous souhaitez animer une box-shadow, envisagez de placer la règle box-shadow sur un pseudo-élément et d'animer l'opacité de cet élément à la place. D'autres éléments peuvent impacter les performances : les images volumineuses ou mises à l'échelle dynamiquement, et les éléments qui se chevauchent avec différentes valeurs de position (par exemple, un élément positionné en absolu sur un élément fixe).