上述代码中，由于 selectIndex是动态的，元素不断地在显示与隐藏。因此，Transition标签的进入样式和离开样式会动态触发，从而形成切换效果。

v-enter是元素的进入样式，进入时，我们从最右边偏移100%的距离到正常位置，透明度从0到1，这个过程持续0.6s，实现了元素左移淡入的效果。

v-leave是元素的离开样式，离开时，我们从正常位置偏移到100%的左侧位置，透明度从1到0，这个过程持续0.6s，实现了元素左移淡出的效果。

在这些类的共同作用下，我们实现了元素的动态切换。

你可能注意到了我给元素设置了一个banner-scroll-wrap类名，并使用了position: absolute，这样设置的注意目的是保证切换离开元素的淡出效果和进入元素的淡入效果是连贯的。如果你不这样写，可能会出现样式问题。

此外，注意我给Transition设置了key="Transition"，这样些会保证每次数据在切换时，transition能够重新渲染，触发元素离开和进入的样式。

至此，我们就完成了基本功能样式

<template> <div class="main-content"  @mouseenter="stop()" @mouseleave="start()">     <Transition v-for="(build, index) in list" :key="selectIndex">         <div class="banner-scroll-wrap" v-show="index === selectIndex">             卡片自定义内容         </div>     </Transition> </div> </template> <script setup> const selectIndex = ref(0) const list = ref(     [{ name: "卡片1", id: 1 }, { name: "卡片1", id: 2 }, { name: "卡片1", id: 2 }] )  // #计时器实例 let timer: any = null  // >计时器逻辑 const timeFuc = () => {     timer = setInterval(() => {       // 更改选中的index       if (selectIndex.value >= list.value.length - 1) {         selectIndex.value = 0       } else {         selectIndex.value++       }     }, 5000) }    // >开启轮播   const start = () => {     if (timer) return     timeFuc()   }    // >关闭轮播   const stop = () => {     clearInterval(timer)     timer = null   }  timeFuc() <scriptp> <style lang="less" scoped> <style/>

<script setup>      //...      // 解决切屏后重影的问题   onMounted(() => {     document.addEventListener('visibilitychange', () => {       // 用户息屏、或者切到后台运行 （离开页面）       if (document.visibilityState === 'hidden') {         stop()       }       // 用户打开或回到页面       if (document.visibilityState === 'visible') {         start()       }     })   })        onBeforeUnmount(() => stop())  <scriptp>

visibilitychange 事件：当其选项卡的内容变得可见或被隐藏时，会在 document 上触发 visibilitychange 事件。该事件不可取消。

总结

在本教程中，我们通过简单代码实现了无缝轮播效果，样式是左右切换，我们也可以通过样式控制实现上下切换的效果，比如将translateX设置为translateY即可。

 .v-enter-from {     transform: translateY(100%);     opacity: 0; }