Aperçu des sections

  • Présentation

    Nécessite d'avoir vu le premier cours sur vuejs.

    • Transitions

      Les transitions Vue sont des balises qui permettent de générer des classes CSS inline (via la modification du DOM) correspondantes à l'état d'une transition. Les transitions ne font pas d'animations en soit. Ce sera à vous d'utiliser les classes de transitions pour définir les transformations à effectuer pendant les différentes phases d'une transition. 

      Par exemple :

      • entrer dans la transition (début)
      • transition en cours (animation)
      • sortir de la transition (fin)


      Il y a deux types de transitions :

      • les transitions qui ne concerne qu'un seul élément (apparition / disparition)
      • les transitions qui impactent plusieurs éléments (transitions de listes)


      Les balises qui permettent de mettre en place une transition sur un ou plusieurs éléments sont :

      <transition>   //Pour un seul élément (v-if)

      ou bien 

      <transition-group>  //Pour plusieurs éléments (v-for)


      Ces balises peuvent prendre différents attributs :

      • name : ce sera le préfixe utilisé lors de la génération des classes de transitions (par défaut : "v")
      • tag : ce sera la balise "root" de la transition (par défaut : <span>)


      Note : dans les transitions de groupes, il vous faudra penser à utiliser la directive Vue :key sur les balises internes afin que vue puisse les identifier par un id unique.


      Classes de transitions

      Voici les classes qui sont générées automatiquement par Vue pendant les phases de transitions :


      Pour reprendre l'exemple de la doc, voici une transition simple :

      <transition name="ma-transition">
         <p v-if="show">bonjour</p>
      </transition>

      Ici, on peut constater que :

      • la transition se nomme "ma-transition", ce sera le préfixe des classes CSS pour cet élément
      • la transition ne concerne qu'un seul élément (v-if)
      • si l'élément disparaît ou apparaît (en fonction de la propriété show du modèle), alors les différentes classes de transitions lui seront appliquées au fil du temps prévu par le timer CSS présent dans la propriété transition.


      Et on pourra alors exploiter ces classes dans le CSS de notre application :

      .ma-transition-enter-active{
        transition: all 0.5s;
      }
      .ma-transition-enter{
        opacity: 0;
        transform: scale(1.5);

      }
      .ma-transition-enter-to{
        opacity: 1;
        transform: scale(1);

      }
      .ma-transition-leave-active {
        transition: all 0.25s;
      }
      .ma-transition-leave-to {
        transform:scale(0);
        opacity: 0;
      }


      Voici un exemple de modification du style inline des éléments d'une transition de liste, regardez bien l'inspecteur à droite :

      Si vous faites pause au bon moment, vous pourrez constater l’apparition des classes de transitions dans les différents éléments composant la liste.

       

       



      Divers

      Le système de transitions offert par Vue offre de nombreuses autres possibilités plus ou moins utiles selon les cas, notamment :

      • la possibilité de déclarer des hooks JS qui peuvent s'exécuter aux différentes étapes d'une transition
      • personnaliser le nom des classes CSS de transitions
      • définir une apparition au chargement de la page (appear)
      • etc...


      Je vous renvois à la doc officielle pour des explications plus poussées sur les transitions : https://fr.vuejs.org/v2/guide/transitions.html

      Vous pourrez trouver pas mal de plugins qui se basent sur les transitions Vue pour faire des composants d'interfaces standards, propres, et personnalisables (carrousel, etc...). Voici une démo d'animations Vue : https://codepen.io/udyux/pen/EwwPgr


      • TP Typicode

        Ce TP va vous permettre de travailler sur un projet un peu plus concret que le TD que nous venons de réaliser en parallèle des cours. L'API que vous utiliserez ici est un fake, c'est à dire que ça n'est pas une API au sens strict du terme. Ce sont juste des routes qui vous retourne des JSON, et qui sont conçues de la même manière qu'une vrai API. Mais il n'y a ni authentification, ni base de données.

        Tout en restant avec une version dev et CDN de Vue, vous allez pouvoir ré-utiliser toutes les notions abordées plus haut pour réaliser tout ça. Mettez l'accent sur les composants.


        À rajouter : transition (sur les photos), props, evenement enfant->parent, etc...