当前位置：首页 > VUE

vue 如何实现旋转

2026-02-19 10:00:41VUE

在Vue中实现旋转效果可以通过CSS动画、JavaScript动画库或结合Vue的响应式数据动态控制样式。以下是几种常见方法：

使用CSS动画

通过Vue绑定类名或内联样式，触发CSS定义的旋转动画。

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

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

<style>
.rotating-box {
  width: 100px;
  height: 100px;
  background-color: #42b983;
  transition: transform 0.1s linear; /* 平滑过渡 */
}
</style>

使用CSS关键帧动画

通过@keyframes定义旋转动画，Vue控制动画的播放状态。

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

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

<style>
.rotate-animation {
  width: 100px;
  height: 100px;
  background-color: #ff7043;
}

.rotate-animation.active {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>

使用GSAP等动画库

通过第三方库如GSAP实现更复杂的旋转动画控制。

<template>
  <div ref="targetElement" class="gsap-box"></div>
</template>

<script>
import { gsap } from 'gsap';

export default {
  mounted() {
    gsap.to(this.$refs.targetElement, {
      rotation: 360,
      duration: 2,
      repeat: -1,
      ease: "power1.inOut"
    });
  }
}
</script>

<style>
.gsap-box {
  width: 100px;
  height: 100px;
  background-color: #2196f3;
}
</style>

动态绑定旋转角度

结合用户交互或数据变化动态更新旋转角度。

vue 如何实现旋转

<template>
  <div>
    <input type="range" v-model="angle" min="0" max="360">
    <div class="dynamic-rotate" :style="rotateStyle"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      angle: 0
    }
  },
  computed: {
    rotateStyle() {
      return {
        transform: `rotate(${this.angle}deg)`,
        transition: 'transform 0.3s ease'
      };
    }
  }
}
</script>

<style>
.dynamic-rotate {
  width: 100px;
  height: 100px;
  margin-top: 20px;
  background-color: #9c27b0;
}
</style>

以上方法可根据实际需求选择，CSS动画适合简单效果，GSAP适合复杂动画，动态绑定适合需要精确控制的场景。