当前位置：首页 > VUE

vue 如何实现旋转

2026-01-18 17:39:35VUE

Vue 实现旋转效果的方法

在Vue中实现旋转效果可以通过CSS动画、JavaScript或第三方库完成。以下是几种常见方法：

使用CSS动画

通过Vue绑定class或style实现CSS旋转动画：

<template>
  <div :class="{ 'rotate': isRotating }" @click="toggleRotate">点击旋转</div>
</template>

<script>
export default {
  data() {
    return {
      isRotating: false
    }
  },
  methods: {
    toggleRotate() {
      this.isRotating = !this.isRotating
    }
  }
}
</script>

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

使用动态style绑定

直接通过style绑定transform属性实现精确控制：

<template>
  <div 
    :style="{ transform: `rotate(${rotationAngle}deg)` }"
    @click="rotateBy(45)"
  >
    当前角度: {{rotationAngle}}°
  </div>
</template>

<script>
export default {
  data() {
    return {
      rotationAngle: 0
    }
  },
  methods: {
    rotateBy(degrees) {
      this.rotationAngle += degrees
    }
  }
}
</script>

使用transition过渡

为旋转添加平滑过渡效果：

<template>
  <div class="rotatable" :style="{ transform: `rotate(${angle}deg)` }"></div>
  <button @click="angle += 90">旋转90°</button>
</template>

<script>
export default {
  data() {
    return {
      angle: 0
    }
  }
}
</script>

<style>
.rotatable {
  transition: transform 0.5s ease;
  width: 100px;
  height: 100px;
  background: blue;
}
</style>

使用第三方动画库

引入GSAP等专业动画库实现复杂旋转：

<template>
  <div ref="target" class="box"></div>
  <button @click="rotate">高级旋转</button>
</template>

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