vue实现旋转

Vue实现旋转效果的方法

在Vue中实现旋转效果可以通过CSS动画或JavaScript动态控制样式。以下是几种常见实现方式：

使用CSS动画和Vue绑定

通过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: rotation 2s infinite linear;
}

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

使用动态样式绑定

通过计算属性动态计算旋转角度：

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

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

使用第三方动画库

例如使用Vue过渡动画或animate.css：

<template>
  <transition name="rotate">
    <div v-if="show" class="box">旋转内容</div>
  </transition>
</template>

<style>
.rotate-enter-active {
  animation: rotation 0.5s;
}
.rotate-leave-active {
  animation: rotation 0.5s reverse;
}
</style>

使用GSAP实现复杂旋转

对于更复杂的旋转动画，可以使用GSAP库：

<template>
  <div ref="rotatable" @click="rotate">
    点击使用GSAP旋转
  </div>
</template>

<script>
import gsap from 'gsap'

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

注意事项

• 旋转元素需要设置transform-origin属性来确定旋转中心点
• 连续旋转时注意性能优化，避免不必要的重绘
• 移动端考虑添加will-change: transform提升性能
• 对于SVG元素的旋转需要使用SVG特有的transform属性