Des animations avec Aurelia

Animer une application Aurelia est extrêmement simple. Vous pouvez en apprendre pas mal sur la théorie sur le blog de l'auteur mais ici, on va voir comment rapidement mettre en place une animation sur une liste d'éléments.

La première chose à faire est d'activer le plugin aurelia-animator-css dans votre fichier main.js :

export function configure(aurelia) {  
  aurelia.use
  .standardConfiguration()
  .developmentLogging()
  .plugin('aurelia-animator-css');

  aurelia.start()
  .then(() => aurelia.setRoot());
}

À partir de ce moment là, Aurelia va s'intéresser aux éléments comportant la classe au-animate et agir en conséquence. Lorsque l'élément sortira du DOM, la classe au-leave lui sera ajouté, puis la classe au-leave-active et enfin lorque l'animation sera terminée, l'élement sera retiré. Même principe pour l'entrée d'un élément dans le DOM avec au-enter et au-enter-active mais aussi lors de l'ajout ou le retrait d'une classe à un élément. Dans ces deux derniers cas, la transition se fera à l'aide de <nom de la classe>-add et <nom de la classe>-remove.

Vous aurez donc compris qu'avec tout ça, tout ce qu'il reste à faire, c'est écrire la css qui va bien à notre liste.

Commençons par mettre en place notre liste :

view.html

<template>  
<ul  
  class="animated-collection au-stagger">
  <li
    repeat.for="item of items"
    class="au-animate">
    <span
      click.trigger="remove(item)">X</span>
    ${item}
  </li>
</ul>  
</template>  

view.js

export class View {  
  items = ['foo', 'bar'];
  remove(item) {
    this.items.splice(this.items.indexOf(item));
  }
}

styles.css

@-webkit-keyframes swipeRight {
  0%   { -webkit-transform: translate3d(-120%, 0, 0); }
  100%   { transform: translate3d(0, 0, 0); }
}

@keyframes swipeRight {
  0%   { transform: translate3d(-120%, 0, 0); }
  100%   { transform: translate3d(0, 0, 0); }
}

@-webkit-keyframes swipeLeft {
  0%   { -webkit-transform: translate3d(0, 0, 0); }
  100%   { transform: translate3d(-120%, 0, 0); }
}

@keyframes swipeLeft {
  0%   { transform: translate3d(0, 0, 0); }
  100%   { transform: translate3d(-120%, 0, 0); }
}
.animated-collection {
  overflow: hidden;
  padding: 1em;
  margin: -1em;

  -webkit-animation-delay:50ms;
  animation-delay:50ms;
}
.animated-collection>li.au-enter {
  transform: translate3d(-120%, 0, 0);
}

.animated-collection>li.au-enter-active {
  -webkit-animation: swipeRight .4s;
  animation: swipeRight .4s;
}

.animated-collection>li.au-leave-active {
  -webkit-animation: swipeLeft .4s;
  animation: swipeLeft .4s;
}

Et c'est tout.

animated-collection est une classe arbitraire qui me permet de définir le style d'animation pour ma liste. Évidemment, vous pouvez vous en passer si vous préférez utiliser la même animation partout.

Il faudra donc définir les animations activées par .au-enter-active correspondant à l'entrée d'un nouvel élément dans le DOM et .au-leave-active correspondant à sa sortie.
Il faudra aussi penser à définir l'état de départ de l'élément grâce à .au-enter pour que l'animation se passe correctement. Par exemple ici, je fais une translation horizontale, si je n'indique pas que l'élément doit d'abord être caché, alors il apparaitra immédiatement à sa place donc sans animation.

Il reste encore un petit truc, c'est la classe au-stagger appliqué au conteneur. Grâce à cette classe, Aurelia comprend qu'il doit appliquer les animation sur les éléments les uns après les autres plutôt que sur chacun en même temps. Donc selon l'effet que vous voulez afficher, vous pourrez donc soit afficher tous les items en même temps, ou les afficher l'un après l'autre comme sur la vidéo d'exemple.

Hadrien

Hi, I'm a french Web Lead Developer, Front End Architect from Toulouse, France. I've worked for 7 years for Overblog then 2 years with AngularJS. Now, I'm a great fan of Aurelia.io.

Toulouse, France https://hadrien.eu