当前位置：首页 > VUE

vue实现停止动画

2026-01-17 20:45:11VUE

停止动画的方法

在Vue中停止动画可以通过多种方式实现，具体取决于动画的实现方式（CSS动画、JavaScript动画或第三方库如GSAP）。

使用CSS动画

通过动态绑定类名或样式来控制动画的播放状态。

<template>
  <div :class="{ 'animate': isAnimating }" @click="toggleAnimation">
    Click to toggle animation
  </div>
</template>

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

<style>
.animate {
  animation: spin 2s linear infinite;
}

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

使用JavaScript动画

通过清除动画帧来停止requestAnimationFrame动画。

<template>
  <div ref="animatedElement" @click="toggleAnimation">
    Click to toggle animation
  </div>
</template>

<script>
export default {
  data() {
    return {
      animationId: null,
      angle: 0,
      isAnimating: false
    }
  },
  methods: {
    animate() {
      this.angle += 2
      this.$refs.animatedElement.style.transform = `rotate(${this.angle}deg)`
      this.animationId = requestAnimationFrame(this.animate)
    },
    toggleAnimation() {
      if (this.isAnimating) {
        cancelAnimationFrame(this.animationId)
      } else {
        this.animate()
      }
      this.isAnimating = !this.isAnimating
    }
  }
}
</script>

使用GSAP动画

GSAP提供了直接控制动画的方法。

<template>
  <div ref="animatedElement" @click="toggleAnimation">
    Click to toggle animation
  </div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  data() {
    return {
      animation: null,
      isAnimating: false
    }
  },
  mounted() {
    this.animation = gsap.to(this.$refs.animatedElement, {
      rotation: 360,
      duration: 2,
      repeat: -1,
      paused: true
    })
  },
  methods: {
    toggleAnimation() {
      if (this.isAnimating) {
        this.animation.pause()
      } else {
        this.animation.play()
      }
      this.isAnimating = !this.isAnimating
    }
  }
}
</script>

使用Vue Transition

通过v-if或v-show控制过渡动画的显示。

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">This content will fade in and out</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>