Vue3如何实现像这个网站的图片自动切换效果?

Question

Vue3如何实现像这个网站的图片自动切换效果

https://fortnite.gg/shop
这是我写的template

<div class="shop-section" v-for="(items,index) in shopStore.shopList" :key="items">
    <h2 class="section-name">{{index}}</h2>
    <div :class="'shop-card ' + index" v-for="item in items"  :style="{'height': index.includes('Jam Tracks') ? '200px' : 'none'}" @click="preview(item)">
        <img class="item-img" v-for="img in item.image" v-lazy="img" alt="" :style="{'height': index.includes('Jam Tracks') ? '200px' : 'none'}">
        <div class="item-info-container">
        <p class="item-name">{{ item.name }}</p>
        <p class="item-price"><img style="width: 20px; vertical-align: middle;" src="@/assets/imgs/vbuck.png" alt="">{{item.price}}</p>
    </div>
    </div>
</div>

查看了该网站的效果是设置了两个class="animation"的盒子来做链接切换并且调整高度,但是我的每个item的图片数量不确定,有的为1,有的为2,3个,实在想不出来应该怎么实现了,可以请教大佬们一下思路吗

---

Answer 1

看了@Yummy大佬的回答应该是正确的思路.
自己用mask写了一样的效果,思路就是调整Z轴切换最上层图片,在最上层图片添加MASK路径动画,也受到掘金大佬(飞叶_前端)文章的启发
https://codepen.io/veLve-L/pen/xxBdNWW

Answer 2

打开控制台inspect那个图片,看人家样式不就知道是 max-height 的过渡吗?