Angular 2 : Dynamisation des applications

Créer des transitions

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les transitions doivent être très précises pour pouvoir fonctionner. Vous devez sélectionner proprement chaque transition.
02:52

Transcription

Les transitions, elles doivent avoir un point de départ et un point d'arrivée. Et pour le moment, elles ont effectivement un point de départ et un point d'arrivée à chaque fois, mais ici on s'est trompé sur la transition. 'ease-in', c'est de l'entrée. 'ease-out' c'est de la sortie. Donc ça veut dire que pour le deuxième, il serait plus intéressant d'avoir du 'in'/'out'. Donc 'in' en entrée, 'out' en sortie. Ce qui fait qu'ici, on va résoudre le problème de bug de transition. On avait un petit souci de bug de transition, voilà comment le résoudre facilement. Alors maintenant qu'est-ce que je peux vous dire de plus sur les transitions ? Et bien on va pouvoir les combiner. Je m'explique : imaginons que votre état inactif/actif et actif/inactif soient la même animation. On sait qu'on va vouloir du 'ease' dans les deux cas et qu'on va vouloir surtout du 1000ms dans les deux cas. Alors attention ça ne marchera que si vous avez la même animation pour les deux états. Donc ici je vais récupérer cet état-là. Et puis je vais venir directement l'implémenter ici, après la virgule, et enfin je vais terminer par l'animation. Et je vais supprimer cette ligne-là. Le 'animate' qu'on a juste derrière va être intéressant parce qu'on va pouvoir très facilement venir ici mettre du 'ease'. Et attention, vous devrez composer une string. Non pas deux les uns derrière les autres mais une string à proprement parler. En fait, le premier paramètre de transition ici permet de définir les différentes transitions et les différentes transitions d'états d''inactive' vers 'active' et d''active' vers 'inactive'. De même ne faites pas l'erreur de vouloir les référencer dans le sens contraire, c'est à dire comme ça, parce que c'est un opérateur qui n'est pas reconnu par Angular. Il vous dira que c'est pas possible de le faire dans ce sens. Donc on va enregistrer ça, et ici on va bien avoir une transition d'un état vers l'autre dans les deux sens avec la même animation. Vous voyez qu'ici c'est exactement la même, c'est du 1000ms et c'est du 'ease'. Alors faites pas du 'ease-in' ou du 'ease-out' parce que pour le coup ben on pourrait mettre du 'ease-out' si on veut. Mais c'est vrai qu'il vaut mieux référencer directement l'animation qui nous intéresse, sachant que de toute façon ça va être absolument pareil. Pour le coup ici on aura la même chose ça va rendre la même chose. Donc préférez prendre du 'ease' directement tout court, pour que ce soit plus parlant. Une autre façon de faire ça, parce qu'il en existe encore une, c'est de supprimer ici cette ligne-là et de dire à Angular avec l'opérateur ici celui-ci, que l'on souhaite avoir l'animation dans les deux sens. D''active' vers 'inactive' et d''inactive' vers 'active', et avec la même animation. Ça c'est possible également. Ça vous évite d'avoir à réécrire encore la transition c'est une possibilité offerte par le framework d'animation. Donc là vous voyez que ça ne change absolument rien, on a possibilité aussi d'animer dans les deux sens. Alors c'est pas tout, évidemment là on vient de référencer une animation uniquement sur deux propriétés, mais on pourrait le faire avec beaucoup plus de propriétés, et traiter les différentes propriétés, les différents états, différemment.

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 !