实现图像轮播效果的vue 3 解决方案

你遇到的问题是根据提供的网站示例，在 Vue 3 中实现图像自动切换效果。网站上的效果是通过使用两个带有“animation”类的盒子来实现的。

解决方案：遮罩动画

要解决你的问题，一种可行的解决方案是使用遮罩动画。遮罩动画是一种通过在元素上添加路径来创建效果的技术，该路径会沿着该路径移动。

实现步骤：

1. 将一个遮罩添加到最上层的图像。
2. 在遮罩上设置路径动画。
3. 当路径动画完成后，切换最上层的图像。

代码示例：

<div class="shop-card">
  <div class="mask">
    <svg>
      <path d="M 0 0 L 100% 0 L 100% 100% L 0 100% Z" />
    </svg>
  </div>
  @@##@@
</div>