Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Angular 2 : Dynamisation des applications

Exploiter la librairie d'animations

Testez gratuitement nos 1334 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Pour que tout soit plus simple, des librairies d'animations CSS existent. Voyez comme les inclure dans un projet Angular.
05:51

Transcription

Tout référencer à la main pour faire des animations de transition, des fois ça peut être très compliqué. Alors le gros problème qu'on va avoir, c'est que vous n'avez pas la possibilité dans les animations qu'on a vu ici, de renseigner des animation names. Et ça c'est vraiment dommage parce que des librairies se basent là-dessus, définissent les animations en CSS, mais on ne peut pas les utiliser. Alors moi je vais vous montrer comment on utilise les animations CSS si on veut utiliser un framework d'animation. Je ne sais pas si vous connaissez, mais il existe un très bon framework qui s'appelle Animate.css, que vous trouverez très facilement sur Internet. Animate.css, qui permet de bénéficier de tout un tas d'animations déjà référencé, qui permettent d'animer proprement une interface. Alors on a des entrées, des sorties, on a tout un tas de choses, par exemple, on a le tada, qui permet d'animer très rapidement. Je vais vous le remontrer, il est vraiment sympa celui-là. Et ça, ça peut s'appliquer sur un peu tout. Le problème, c'est qu'on va devoir faire pas mal de modifications dans notre code pour que ça fonctionne. Alors, d'abord, il faut installer cette librairie, vous l'installez via Bower. Vous avez toutes les informations pour l'installer. Vous pouvez regarder sur le projet GitHub, qui référence vraiment l'installation, l'utilisation. Donc par Bower, c'est assez simple, c'est simplement, voilà, une ligne en console à taper. Et puis ça vous installe la librairie, ça vous l'installe dans le dossier bower, ici, bower_components, Animate.css. Alors, la première étape évidemment, ça va être de renseigner ici, tout en bas dans notre index.html, la librairie. Donc cette librairie, ce n'est qu'une feuille de style CSS, donc on va l'ajouter comme ça, on va mettre une nouvelle ligne, animate.css. Et ce sera largement suffisant. Alors, je vais revenir sur mon application, et je vais vous montrer ce qu'on va implémenter. On va implémenter ça. On veut une apparition, une disparition. Alors, il y a des petites choses à respecter quand même, quand on veut travailler avec les apparitions, disparitions comme ça. C'est d'abord qu'on ne va plus référencer du tout d'animations. On va se baser uniquement sur une modification de l'objet, pour venir travailler sur les styles et les classes CSS. Animate.css, ça fonctionne avec des classes. On va ouvrir item.html, et je vais vous montrer ce que j'ai référencé à l'intérieur. Tout simplement, vous allez voir qu'en haut ici, j'utilise dans un premier temps une nouvelle state, une animatestate, qui s'appelle removedFromDom. Ça va me permettre ça de le supprimer. Sachant qu'une animation ne se jouera pas si l'élément n'est plus apparent dans le DOM. C'est de l'animation CSS, donc ajoutez le NgIf ici, qui nous permettra de faire le pivot à la fin quand l'animation aura terminé de jouer, et de supprimer vraiment cet élément du DOM. Ensuite, on est obligé quand on utilise Animate.css d'avoir une classe animated, si on veut que ça fonctionne, donc vous ajouterez bien la classe animated sur les éléments à animer. Et après, ce n'est qu'un jeu de classe, et le jeu de classe, on va le créer ici avec cette déclaration, NgClass. NgClass, qu'est-ce que ça fait ? Ça prend un objet, et ça va définir quelles sont les classes qui seront appliquées en fonction de quel critère. Alors, j'ai utilisé le rubberBand, qui nous permet d'avoir une petite animation sympa, si on n'est pas sur du removed. Donc voyez ici, voilà, si je n'ai pas removed, tu me mets le rubberBand, donc concrètement à la création de l'item. Et puis ensuite, j'ai utilisé un petit peu plus loin la classe fadeOut, si je suis en removed, donc égal, égal, égal à removed. Utiliser un objet de classe comme ça, c'est intéressant, parce que pour jouer les animations, il faut pouvoir supprimer la classe précédente. Vous ne pouvez pas avoir deux classes d'animation sur un seul élément, ça ne marcherait pas. Donc en utilisant comme ça ici, des pivots qui vont être des pivots par des conditions, on va pouvoir dire que, tu n'appliques cette classe que si ça respecte cette condition. Tu n'appliques cette classe que si ça respecte cette condition. Comme ça, ça va vous enlever et vous remettre les classes tout seul. Maintenant, le code qui fait fonctionner tout ça, comment ça marche ? En fait tout simplement, avec un petit jeu de timeout. Alors, c'est la petite chose dérangeante un petit peu, quand on fait de l'animation comme ça avec ce framework, c'est qu'il faut jouer sur l'ajout ou la suppression de classes, mais nous on va faire ça directement avec l'animatestate, et bien sûr, à la propriété NgClass. Et comme ça, ce sera super, et ça va fonctionner à peu près tout seul. Alors, ce n'est pas compliqué, ce qu'on va faire, c'est qu'on va unshift comme tout à l'heure, et puis on va faire un set timeout ici, item.animatestate = removed, à 2000. Et on sait que l'animation va se jouer pendant à peu près 1000, donc on va rajouter 1000 à ces 2000, et on va câbler tout de suite un autre set timeout, avec le removedFromDom. Le removedFromDom va être appliqué à 3000 millisecondes, bien sûr. Donc, il nous permettra grâce au NgIf, de supprimer vraiment du DOM. Et le removed qu'on a là, sera ajouté à 2000, ce qui nous permettra d'avoir l'effet évidemment sur l'animation. Ça, ce qu'on a câblé ici en timeout, vous, vous le mettrez sur un bouton supprimer là. Supprimer la commande, par exemple, ça pourra être ajouté sur un vrai évènement. Ça, ce n'est pas un problème, donc nous, c'est pour l'exemple qu'on le met ici, onCreateItem. Bon, il n'y a plus qu'à tester du coup ! Ici, je viens référencer un nouvel item, je l'ajoute effectivement, il s'ajoute avec un effet rubberBand. Et ensuite, il disparaît et il est supprimé du DOM. Alors, je vais vous montrer ce qu'il se passe si je ne le supprime pas du DOM. Si donc, je ne mets pas ce statut-là. Alors concrètement, il va se passer ça, on va aller se recharger, on va en ajouter un nouveau, effectivement il va bien s'ajouter. Mais après, il va disparaître et il va continuer comme ça à boucler. Et il va revenir surtout, parce que le souci si vous voulez, c'est qu'on va mettre le removed, mais du coup, il ne va pas être supprimé vraiment du DOM. C'est pour ça qu'il faut absolument câbler un NgIf, avec une propriété particulière, qui vous permettra de le supprimer du DOM. Vous voyez qu'intégrer une bibliothèque d'animation CSS, ce n'est pas compliqué en soi, par contre, ce n'est pas le même fonctionnement que l'animation qu'on va utiliser avec les différentes propriétés et les différentes fonctions que nous fournit Angular. Mais on a deux façons de le faire, soit vous utilisez un framework, soit vous utilisez directement le framework d'animation d'Angular, là après, c'est un peu vous qui voyez.

Angular 2 : Dynamisation des applications

Apprenez à dynamiser vos applications avec AngularJS. Créez un module parent, utilisez le moteur d’animation intégré, découvrez les cycles de vie disponibles, etc.

2h03 (28 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :31 oct. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !