如何在Vue3中實現圖片自動切換效果的詳細指南？

<template>   <div class="shop-section">     <div :key="item.id" class="shop-card" v-for="item in items">       <div class="image-container">         @@##@@         <div :style="maskStyle" class="mask"></div>       </div>       <div class="item-info-container">         <p class="item-name">{{ item.name }}</p>         <p class="item-price">@@##@@{{ item.price }}</p>       </div>     </div>   </div> </template>  <script> export default {   data() {     return {       currentIndex: 0,       maskStyle: { /*  此處設置遮罩層動畫樣式，例如使用CSS變量或動畫類名 */ },       interval: null // 定時器變量     };   },   mounted() {     this.interval = setInterval(() => {       this.currentIndex = (this.currentIndex + 1) % this.items[0].images.length; // 實現循環輪播     }, 3000); // 每3秒切換一次   },   beforeUnmount() {     clearInterval(this.interval); // 組件銷毀前清除定時器   },   methods: {     //  setCurrentIndex 方法可以根據需要添加，例如鼠標懸停切換圖片   }, }; </script>  <style scoped> .image-container {   position: relative;   overflow: hidden; /* 隱藏超出部分 */ }  .image-container img {   position: absolute;   top: 0;   left: 0;   width: 100%;   height: 100%;   z-index: 1;   transition: opacity 0.5s ease; /* 添加過渡效果 */ }  .image-container img.active {   z-index: 2;   opacity: 1; }  .image-container img:not(.active) {   opacity: 0; }  .mask {   position: absolute;   top: 0;   left: 0;   width: 100%;   height: 100%;   z-index: 3;   /*  此處添加遮罩層動畫樣式，例如漸變或其他動畫效果 */ } </style>