当前位置：首页 > VUE

vue实现旋转

2026-03-06 22:52:54VUE

Vue 实现旋转效果的方法

使用 CSS 动画

通过 Vue 绑定 class 或 style 来实现 CSS 动画旋转效果。定义一个旋转动画关键帧，并在元素上应用该动画。

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.rotate {
  animation: rotate 2s linear infinite;
}

在 Vue 模板中动态绑定 class：

<template>
  <div :class="{ 'rotate': isRotating }"></div>
</template>

<script>
export default {
  data() {
    return {
      isRotating: true
    }
  }
}
</script>

使用动态样式绑定

通过 Vue 的 style 绑定动态计算旋转角度，适合需要精确控制旋转角度的场景。

<template>
  <div :style="{ transform: `rotate(${angle}deg)` }"></div>
</template>

<script>
export default {
  data() {
    return {
      angle: 0
    }
  },
  mounted() {
    setInterval(() => {
      this.angle = (this.angle + 1) % 360
    }, 16)
  }
}
</script>

使用第三方动画库

引入如 animate.css 或 vue-animate 等动画库，可以快速实现旋转效果。

安装 animate.css：

npm install animate.css

在 Vue 中使用：

<template>
  <div class="animate__animated animate__rotateIn"></div>
</template>

<script>
import 'animate.css'
export default {}
</script>

使用 GSAP 实现高级旋转

对于需要复杂动画控制的场景，可以使用 GSAP 动画库。

安装 GSAP：

npm install gsap

在 Vue 组件中使用：

vue实现旋转

<template>
  <div ref="rotatingElement"></div>
</template>

<script>
import { gsap } from 'gsap'
export default {
  mounted() {
    gsap.to(this.$refs.rotatingElement, {
      rotation: 360,
      duration: 2,
      repeat: -1,
      ease: 'none'
    })
  }
}
</script>