vue3实现图片自动切换效果

如何实现像 fortnite.gg 商店页面那样的图片自动切换效果？我们看到了该网站利用两个具有“animation”类名的盒子进行切换，并调整了高度。然而，我们遇到的困难是我们每个商品的图片数量不固定。我们需要一个更通用的解决方案。

解决方案：使用动画蒙板

我们可以使用动画蒙板来处理这种情况：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

1. 创建Z轴动画：为最顶层的图片添加一个动画，调整其Z轴位置，使其在切换时位于最上层。
2. 添加蒙板路径动画：在最顶层的图片上添加一个蒙板路径动画，其路径可以自定义，以允许我们显示所需的图片部分。
3. 基于图片数量调整动画：根据每个商品图片的数量，动态计算动画蒙板路径，以正确展示特定图片。

一位掘金用户（飞叶_前端）的文章为这种方法提供了启发：https://codepen.io/veLve-L/pen/xxBdNWW

立即学习“前端免费学习笔记（深入）”；

示例：

<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"
      @click="preview(item)"
      :style="{
        transform: 'translate3d(0, 0, ' + index * 100 + 'px)',
        height: item.image.length > 1 && '200px',
      }"
    >
      <div
        v-for="img in item.image"
        :key="img"
        :style="{
          position: 'absolute',
          zIndex: img.id === 0 ? 2 : 1,
          mask: img.id === 0 ? 'maskPath' + item.id : 'none',
        }"
      >
        <img :src="img.url" alt="" />
      </div>

      <div v-if="item.image.length > 1" class="maskPath" id="maskPath{{ item.id }}"></div>
    </div>
  </div>
</template>

<script>
// ...省略动画蒙板路径定义，根据实际情况自定义
</script>