VueJS transition-group

[François-Emmanuel CORTES]

bonjour

je recherche de l'aide à propos des balises transition-group des templates de VueJS

il s'agit de réaliser un quiz en 10 questions avec des slides de messages intercalées entre certaines questions

j'ai une structure en web components residant chacun dans des fichiers SingleFileComponent avec la structure

    <app>    # webpack single application (container)

      <quiz> # stores data about slides sorting and type

         <slide> # repeated N times according to quiz.data.slides.length

            # contains children, one of...

            <message> # a mesage slide

            # or

            <question> # radio button question slide

je n'arrive pas à appliquer les transition-group sur les slides quand on clique sur un bouton (message) ou qu'on selectionne une reponse avec un bouton radio (question) pour evacuer la slde parente et passer a la suivante

j'utilise la datastore VueX pour le state mannagement de l'application.

je pourrais detailler plus, si quelqu un se manifeste... ry qu'il connait VueJS !

Y a t-il quelqu un qui peut me repndre ?

Merci, A+, F-E

[François-Emmanuel CORTES]

quelqu'un m'a aimablement répondu sur le  forum VueJS :

il suffit "d'encadrer" le balisage de l'appel au commposant : <slide v-for=""> dans le quiz, quelque chose du genre :

<template>
  <div class="quiz">
    <transition-group
      name="sliding"
      tag="div"
      class="sliding"
    >
      <slide
        v-for="(slide, index) in slides"
        v-if="sliding == index"
        v-bind:slide="slide"
        v-bind:index="index"
        v-bind:key="index">

        </slide>
      </transition-group>
    </div>
  </div>
</template>

VueJS va automatiquement créer une DIV (SPAN par défaut, amis tag="div"...) autour des slides

il n'y a plus qu'a apliquer les bonnes regles sur le CSS et le tour est joué !

Nr pas oublier de positionner l'attribut dynamique clé : v-bind:key="index" pour que cela fonctionne !