I would like to use the transition-group tag with the swiper-slide tag (from swiper.js).
Premise: This code
<swiper
:slidesPerView="'auto'"
:space-between="20"
>
<swiper-slide
v-for="item of list"
:key="item.id"
>
<!-- slide content -->
</swiper-slide>
</swiper>
Will be rendered like this
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
</div>
</div>
But when I try to add a transition-group tag
<swiper
:slidesPerView="'auto'"
:space-between="20"
>
<transition-group name="animation">
<swiper-slide
v-for="item of list"
:key="item.id"
>
<!-- slide content -->
</swiper-slide>
</transition-group>
</swiper>
This is the result:
<div class="swiper">
<div class="swiper-wrapper">
</div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
</div>
What can I do?