Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Angular 2 : Dynamisation des applications

Définir les entrées et les sorties

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
En création et suppression, vos éléments peuvent disposer de transitions particulières qui les animeront.
05:49

Transcription

Au même titre que notre super opérateur magique, qu'on a vu juste avant, on a la possibilité d'utiliser un autre opérateur très intéressant. Celui-ci va nous permettre de travailler sur les entrées et les sorties. Alors, ça veut dire quoi une entrée et une sortie ? Concrètement j'ajoute un nouvel item, il apparaît. Et après, il disparait. Ça, c'est très intéressant à faire, pourquoi ? Parce que ça va améliorer grandement l'utilisation de l'interface, et animer comme ça des états, c'est vraiment super sympa et c'est ce qui est, limite, il faut faire quasiment tout le temps. Essayez de ne pas trop en abuser, parce que c'est vrai que c'est un petit peu particulier. Mais c'est vrai que c'est sympa, je vous montre comment on fait. Alors cet opérateur magique s'appelle void. Void, ça veut dire, l'élément n'est pas dans le DOM, et du coup va apparaître. On peut faire un void vers n'importe quel état puisque de toute façon, avant, il n'y a pas d'état, et puis quand il apparaît dans le DOM, il y a un état particulier. Déjà, ce que vous allez faire, c'est supprimer cette ligne-là, pourquoi ? Parce qu'on avait étoile vers étoile, et ça, il ne faut pas le faire vraiment, parce que ça va bloquer toutes les animations qui sont derrières. Donc on va le supprimer. Deuxième adaptation de notre code, si on veut vraiment que ça fonctionne, ce serait bien que l'item qu'on ajoute, vienne s'ajouter en premier. Pour faire ça, on ne va pas utiliser ici le push qu'on avait avant, et sur la collection, on va utiliser le unshift. Unshift permettra d'ajouter l'élément tout en haut. Alors, ça, ça se trouve dans AppComponent.ts, vous devez faire la modification, sinon, ça ne marchera pas. Pensez également à tester cette modification, pour voir si effectivement quand on ajoute un objet, il apparaît bien en tout premier. Si c'est bon, si c'est fait, on va pouvoir maintenant du coup aller coder la logique vers ce void, qui nous permettra d'avoir de l'information qui apparaît. Alors, comment on va coder ça ? Évidemment, on va coder ici une transition. La transition, vous savez faire, on ouvre et puis on vient coder à l'intérieur, d'abord, la transition de quoi vers quoi. Alors, ça va être la transition de void, tu n'existes pas, vers, ce qu'on veut. Par exemple, vers étoile, ça marcherait très bien. Et puis ensuite ici, on va référencer un array. Et à l'intérieur, on va venir référencer les différentes phases. Alors, attention, parce qu'étant donné que ça va apparaître dans le DOM, puis ça va devoir s'animer, on va devoir coder ça dans l'ordre, c'est-à-dire, le style d'abord et l'animation ensuite, parce qu'il faut que le style s'applique et que l'animation soit jouée ensuite. Alors, le style, parlons-en de ce style, qu'est-ce que ça va être ? Eh bien, on a la possibilité d'utiliser transform. Si vous ne le connaissez pas, je vous conseille d'aller vous documenter sur transform en CSS, qui permet de faire des transformations sur tout un tas de propriétés. Et notamment, la propriété translate. TranslateX, nous permettra de dire qu'on souhaite eh bien, que ça fasse une transition horizontale du coup, et on peut dire à combien on veut la faire. Alors, ici void vers n'importe quoi, on peut lui dire de le faire à -100 %. Et ce qui fait que du coup, ça va simplement s'animer. Alors attention maintenant, il faut aussi l'animer du coup. Parce que là on a référencé le style, c'est très bien, mais il faut également qu'on lui dise en combien de temps. Donc, on met un animate à 1000 comme ça. On enregistre, et c'est largement suffisant pour faire fonctionner le void vers rien. Et là, vous le voyez déjà apparaître. Je vais recharger la page pour que vous puissiez revoir ce qui s'est passé. Effectivement, on voit bien les éléments qui apparaissent. Ce qui fait que maintenant, quand j'en ajoute un, et que je l'ajoute à la collection, il est ajouté en premier et on a l'animation qui se joue. Ça, c'est génial, maintenant comment je fais pour avoir des sorties ? Alors là, c'est un peu plus particulier parce qu'ici on a pas de bouton pour changer l'état, pour avoir quelque chose qui s'en aille. Mais on pourrait le coder assez facilement. Alors je vais vous montrer pour qu'on ait quand même une sortie dans notre projet, et que vous ayez vu cette phase-là. Alors pour la sortie, c'est un peu particulier, parce que la sortie, on veut l'animer et avoir le style. Donc là, il va falloir faire différemment. Il va falloir sortir le style qu'on a ici, voilà. Et il va falloir l'ajouter après, comme ça. Et c'est comme ça que ça va marcher, c'est dans le cas d'une entrée, on codera le style d'abord et l'animation ensuite dans un tableau. Dans le cas d'une sortie, on codera directement l'animation avec le temps d'animation, et le style juste après. Faites attention aux ordres, c'est extrêmement important. Donc là, ça va être un translate x à combien ? Bien, à 100 % pour le coup. Et ça va être de quoi ? Ça va être de n'importe quel état vers void. Parce que sinon, ça ne marchera pas. Donc ça c'est bien, maintenant comment je fais pour faire disparaître mon élément du DOM ? Parce que là le souci, si vous voulez c'est que quand je l'ajoute, c'est bien, ça s'ajoute. Mais il me faut quand même quelque chose, qui me permettent de le faire s'en aller du DOM, et que du coup Angular le comprenne. Pour ça, je vous propose de faire un truc assez simple. C'est-à-dire qu'on va ajouter en fait un statut particulier. On va lui mettre ici un timeout, on va faire un set timeout, comme ça. Ce set Timeout à l'intérieur, on va le coder en ES6, c'est une fonction, donc on va l'ouvrir comme ça. Et puis, on va lui dire de le jouer à 2000 millisecondes. Pourquoi ? Parce que comme ça, l'animation d'entrée aura eu le temps de se jouer, et on aura ensuite l'animation de sortie. Et on va travailler sur l'item, en lui disant, item.animatestate est égal à removed. Comme ça on saura que cet Animatestate là se déclenchera quand il ne sera plus dans le DOM. Alors ça, ça va nous permettre de faire quoi ? Ça va nous permettre de coder dans notre item.html, ici un petit NgIf. NgIf permettra de dire à Angular, bien, si ça respecte une certaine condition, tu ne me le montres pas. Sinon, tu me le montres. Donc comme ça, on va pouvoir le retirer du DOM assez facilement. Animatestate n'est pas égal égal à removed. Ce qui fait que du coup, ça va appliquer le removed au bout de deux secondes, ça va l'enlever du DOM et jouer l'animation. Plus qu'à tester ça, on vérifie, on ajoute l'objet, le timeout se passe, et on a la sortie. Envoyer bien sûr, vous pouvez faire ça évidemment sur un bouton. On pourrait avoir un clic qui change directement le Animatestate, pour le faire disparaître. Et puis, dans la logique, on pourrait aussi, au bout d'un certain timeout, le supprimer vraiment de l'array, donc après, c'est à vous de mettre en place, les différentes phases de l'animation, pour que ça se joue et aussi que ça respecte votre logique métier.

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 !