当前位置：首页 > VUE

vue实现icon转转

2026-01-18 22:48:32VUE

Vue 实现图标旋转动画

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

使用 CSS `animation` 属性

通过定义 CSS 关键帧动画并绑定到图标元素上：

<template>
  <div class="rotating-icon">
    <i class="icon" :class="iconClass"></i>
  </div>
</template>

<style>
.icon {
  display: inline-block;
}

.rotate {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

<script>
export default {
  props: {
    iconClass: {
      type: String,
      default: 'fas fa-spinner' // Font Awesome 示例
    }
  }
}
</script>

使用 Vue 过渡效果

结合 Vue 的过渡系统实现条件触发的旋转：

<template>
  <transition name="rotate">
    <i class="fas fa-sync-alt" v-if="isRotating"></i>
  </transition>
</template>

<style>
.rotate-enter-active {
  animation: spin 1s;
}
.rotate-leave-active {
  animation: spin 1s reverse;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>

使用 GSAP 动画库

对于更复杂的旋转动画，可以使用 GSAP 实现精准控制：

<template>
  <i ref="icon" class="fas fa-cog"></i>
  <button @click="rotate">开始旋转</button>
</template>

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

动态控制旋转状态

通过响应式数据控制旋转状态：

<template>
  <i 
    class="fas fa-refresh" 
    :style="{ transform: `rotate(${rotationDegrees}deg)` }"
    @click="startRotation"
  ></i>
</template>

<script>
export default {
  data() {
    return {
      rotationDegrees: 0,
      rotationInterval: null
    }
  },
  methods: {
    startRotation() {
      this.rotationInterval = setInterval(() => {
        this.rotationDegrees = (this.rotationDegrees + 2) % 360
      }, 16)
    },
    stopRotation() {
      clearInterval(this.rotationInterval)
    }
  },
  beforeDestroy() {
    this.stopRotation()
  }
}
</script>

使用第三方组件库

若使用组件库如 Element UI：

<template>
  <el-icon class="is-loading">
    <Refresh />
  </el-icon>
</template>

<script>
import { Refresh } from '@element-plus/icons-vue'
export default {
  components: { Refresh }
}
</script>

每种方法适用于不同场景，CSS 动画适合简单无限旋转，GSAP 适合复杂动画序列，响应式控制适合需要精确交互的场景。

vue实现icon转转