Angular 2 : Dynamisation des applications

Appliquer des styles

Testez gratuitement nos 1246 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Pour que l'animation soit plus esthétique, il est tout à fait possible d'utiliser un style CSS. Passez en revue les différentes transitions.
05:49

Transcription

Alors maintenant accrochez-vous un petit peu parce qu'on a effectivement référencé les différentes fonctionnalités. Donc maintenant il va falloir attaquer cette fameuse animation. Et comment ça va se passer quand on va devoir animer ? On va utiliser une propriété, une déclaration des composants qui est possible parce qu'on vient d'ajouter effectivement tout ce qu'il faut au-dessus. Alors qu'est-ce qu'on va utiliser ? On va utiliser la propriété 'animations' et 'animations' ça va prendre ici directement un tableau. Quand vous aurez référencé le tableau ici vous pourrez commencer à travailler sur des attentes. On va appeler 'trigger'. 'trigger', ça va nous permettre de vérifier que quelque chose se passe dans l'interface. Alors il faut référencer pour 'trigger' une propriété, un nom de 'trigger' qui sera attaché à un élément dans l'interface, qui nous permettra de savoir ce qu'il se passe. Nous, ici, on va utiliser simplement un nom très simple on va l'appeler 'itemAnimationState'. Alors je vous conseille d'être très parlant dans les noms. C'est extrêmement intéressant et extrêmement important d'être parlant dans les noms. Ensuite, on va devoir référencer un autre tableau comme cela. Et ce deuxième tableau va prendre les différents états. On va utiliser 'state' comme ça, en venant référencer ce qu'il se passe quand c'est actif et ce qu'il se passe quand c'est inactif. Par exemple, je peux lui dire que 'inactive' comme ça, ça va être référencé sur quelque chose. Et ce quelque chose, ça va être un style. Comment je définis des styles css ? Avec la propriété et la fonction 'style'. Évidemment on va mettre du style là-dedans mais c'est pas la question. Et ici on va référencer un objet. Alors cet objet, qu'est-ce qu'il va avoir comme propriété ? À chaque fois une clef particulière et cette clef va être référente à une propriété css. Alors faites très attention parce qu'on doit utiliser ici du camelCase. Je m'explique, imaginons que vous vouliez travailler sur le 'background-color'. On sait qu'en css le background-color c'est 'background' tiret 'color'. Donc c'est camelCasé avec 'color'. En fait vous allez simplement supprimer les tirets des propriétés et ça va fonctionner tout seul il n'y aura pas de problème. Alors moi je vais simplement travailler sur la 'color'. Ici on va mettre du 'red'. Alors attention 'red' n'est pas un mot-clef derrière, c'est vraiment une string, c'est un paramètre que l'on va appliquer. Donc ça c'est mon premier état. Quand c'est 'inactive', je veux que le texte soit en 'red'. Et quand c'est 'active', donc je vais référencer une deuxième 'state' ici avec pareil, un nom 'active' qui correspond à un état. Et puis de la même manière, maintenant vous avez compris le truc, on va référencer un style. Ce style ici va prendre un objet et de la même manière on va pouvoir mettre quelque chose. Alors on sait que de base, la couleur c'est du noir enfin du moins on pourrait même l'annuler carrément mais ici on va mettre du 'blue' parce qu'on a envie de voir ce qu'il se passe. Et on est comme ça, nous on a envie de voir ce qu'il se passe. Ça c'est pas tout à fait terminé. Ici vous référencez les States. Parfait. Mais maintenant on va référencer également une transition. Alors la transition, vous allez voir qu'on peut l'écrire de différentes manières : pour le moment, on va l'écrire de façon très simple. On va simplement dire ce qu'il se passe quand je passe d'inactive' à 'active' et qu'est-ce qu'il se passe quand je passe de 'active' à 'inactive'. Alors vous pouvez tout contrôler avec les transitions, donc on va en faire une première ici qui va dire : de 'inactive' à 'active', comme ça, je vais lui dire que je veux qu'il me fasse une animation, donc 'animate', et je veux qu'elle dure par exemple 1000ms avec un effet. Alors les effets vous devez les connaître déjà, c'est tous les effets classiques qu'on connaissait déjà en jQuery. Alors vous pouvez récupérer la liste évidemment, il y absolument tout aussi dans la documentation d'Angular, vous pourrez aller voir. Et je vais en référencer un autre qui me dira : de 'active' du coup maintenant, vers 'inactive'. Et ici je référence ce qu'il se passe. Donc là je peux lui dire que par exemple, je veux que ce soit du 5000ms et puis je pourrais changer l'effet, je fais un peu ce que je veux. Alors une fois que vous avez codé ça, on pourrait se dire : ah ben c'est génial ça va fonctionner tout seul. Ben on peut essayer, par exemple, on va aller là, et puis on va cliquer. Bon ben on a toujours les messages en console mais rien ne se passe. Parce qu'il nous manque une dernière chose. Et cette dernière chose c'est une référence à l'intérieur du template à ce fameux état, en fait à ce fameux 'trigger'. On a dit qu'il s'appelait 'itemAnimationState'. Alors on va le prendre, comme ça et puis ici on va venir le référencer et c'est un peu particulier. Pour référencer un état, vous allez ouvrir des crochets comme ça vous allez ajouter un @, vous allez donner en fait l'état que vous étiez en train de coder, donc concrètement ici ça va être 'itemAnimationState', et vous allez le câbler sur quelque chose. Et ce quelque chose, vous l'avez déjà codé : c'est l'item point, et vous allez récupérer la propriété 'animateState'. Donc concrètement vous venez de coder un système complet. Ici vous avez placé un 'trigger' qui va s'occuper en fait des animations. On lui donne toutes les informations des animations sous format objet c'est vachement simple, c'est extrêmement facile à apprendre et surtout on va pouvoir monter en compétences très vite là-dessus. Deuxième chose, vous avez câblé sur l'item de la logique qui permet de changer le 'state', et troisième chose vous avez référencé dans le template le 'trigger' que l'on a codé dans le contrôleur avec une liaison vers ce fameux 'animateState'. Maintenant que ça a rechargé, en toute logique, quand je vais cliquer, il va se passer une transition. Alors cette transition-là ce n'est qu'une transition de couleur évidemment mais on pourrait tout à fait venir câbler ce qu'on veut après derrière sans aucun problème. Alors ici on a un petit souci quand même comme vous pouvez le voir c'est que ça va aller sur la bonne couleur mais ça va revenir ensuite. C'est à dire que la couleur n'est pas figée. Alors je vais vous montrer ensuite comment on peut agir facilement sur les transitions et comment on peut très rapidement lui dire : ok tu vas rester sur cette transition-là, et tu vas faire une transition de l'un à l'autre mais sans jamais bouger.

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 !