Transition-group or transition between components

#1

Hello !

I’m pretty new in the Vue world (as in JS world), but I am very curious and always learning new things. I’m a photographer and trying to rebuild my (wordpress) website by a Vue/Tailwind/Gsap/Strapi website.

I started reading the full docs, but I think I did not fully understood Vue concepts. As in every programming language, there is a lot of ways to achieve something, and I don’t want to transgress Vue concepts/approach.

For example, on my front page, I have a carousel with an image, a title, a little description, a counter and navigation arrows.

Screenshot_2021-04-03 Thibaut Flottat - Photographie développement - Auvergne
Screenshot_2021-04-03 Thibaut Flottat - Photographie développement - Auvergne1535×732 171 KB

What is the best way to transition between slides ? Using a transition-group like I have done, for ALL parts of the slide (because I want to animate them differently) ?

<transition-group :css="false" @enter="enter" @leave="leave" tag="div" class="w-3/5 mr-10 relative">
      <img
        v-for="page in pages"
        v-show="page.id === currentPage.id"
        :key="page.id"
        class="absolute inset-0 w-full h-full"
        :src="'./src/assets/img/' + page.to.name + '.jpg'"
      />
</transition-group>

Or use transition between components ?

Thank you, have a good day.