当前位置：首页 > VUE

vue实现旋转效果

2026-01-16 22:18:57VUE

使用CSS动画实现旋转

在Vue中可以通过CSS的@keyframes或transform属性实现旋转效果。在组件的<style>部分定义旋转动画：

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

模板中绑定class：

<template>
  <div class="rotate">旋转元素</div>
</template>

使用Vue的动态绑定实现可控旋转

通过数据驱动控制旋转状态，结合v-bind:style实现动态旋转角度：

<template>
  <div 
    :style="{ transform: `rotate(${angle}deg)` }"
    @click="rotate"
  >点击旋转</div>
</template>

<script>
export default {
  data() {
    return {
      angle: 0
    }
  },
  methods: {
    rotate() {
      this.angle += 90
    }
  }
}
</script>

使用第三方动画库

引入animate.css等第三方库快速实现旋转效果：

npm install animate.css

组件中使用：

<template>
  <div class="animate__animated animate__rotateIn">旋转进入</div>
</template>

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

结合过渡效果实现平滑旋转

使用Vue的<transition>组件实现带有过渡效果的旋转：

<template>
  <button @click="show = !show">切换</button>
  <transition name="rotate">
    <div v-if="show" class="box"></div>
  </transition>
</template>

<style>
.rotate-enter-active, .rotate-leave-active {
  transition: transform 0.5s;
}
.rotate-enter, .rotate-leave-to {
  transform: rotate(180deg);
}
</style>

使用GSAP实现高级旋转动画

安装GSAP库实现更复杂的旋转动画：

npm install gsap

组件中使用：

vue实现旋转效果

<template>
  <div ref="target">高级旋转</div>
</template>

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