AntDesign+Vue3 走马灯的坑

走马灯实现图片旋转缩放时踩坑指南 ☝️

1️⃣ 缘由 🤔

开发中，实现图片自动轮播的走马灯组件十分常见。然而，在使用 AntDesign+Vue3 构建的走马灯中，动态绑定 style 实现图片旋转缩放功能时，可能会遇到问题。图片可能无法正常旋转或缩放，甚至出现混乱的动画效果。

2️⃣ 探究 🔎

产生这个问题的原因在于，在走马灯的组件中，图片的旋转和缩放动画是由 CSS 的 transform 属性控制的。而动态绑定 style 时，直接覆盖了整个 style 对象，包括 transform 属性。因此，当动态绑定 style 时，如果不对 transform 属性进行特殊处理，就会覆盖掉走马灯组件的动画效果，导致图片无法正常旋转或缩放。

3️⃣ 破解 🔑

为了解决这个问题，需要在动态绑定 style 时，单独处理 transform 属性。一种方法是使用 transition 或 animation 属性来控制图片的动画。另一种方法是使用 transition-delay 属性来延迟动画的开始时间，确保动画在走马灯组件的动画结束后才开始。

3.1 使用 transition 或 animation 属性

可以使用 transition 或 animation 属性来控制图片的动画。例如，可以使用以下代码来实现图片的旋转动画：

<template>
  <a-carousel>
    <a-carousel-item>
      <img
        :style="{ transition: 'transform 1s ease-in-out', transform: 'rotate(0deg)' }"
        @click="rotateImage"
      />
    </a-carousel-item>
  </a-carousel>
</template>

<script>
export default {
  methods: {
    rotateImage() {
      this.$refs.image.style.transform = 'rotate(360deg)';
    }
  }
};
</script>

3.2 使用 transition-delay 属性

可以使用 transition-delay 属性来延迟动画的开始时间，确保动画在走马灯组件的动画结束后才开始。例如，可以使用以下代码来实现图片的旋转动画：

<template>
  <a-carousel>
    <a-carousel-item>
      <img
        :style="{ transition-delay: '1s', transition: 'transform 1s ease-in-out', transform: 'rotate(0deg)' }"
        @click="rotateImage"
      />
    </a-carousel-item>
  </a-carousel>
</template>

<script>
export default {
  methods: {
    rotateImage() {
      this.$refs.image.style.transform = 'rotate(360deg)';
    }
  }
};
</script>

4️⃣ 总结 🧐

在 AntDesign+Vue3 中使用走马灯时，动态绑定 style 实现图片旋转缩放功能时，可能会遇到问题。这是因为动态绑定 style 时，直接覆盖了整个 style 对象，包括 transform 属性。因此，需要在动态绑定 style 时，单独处理 transform 属性。可以使用 transition 或 animation 属性来控制图片的动画，也可以使用 transition-delay 属性来延迟动画的开始时间。