当前位置：首页 > VUE

vue怎么实现重复动画

2026-02-24 20:07:47VUE

在Vue中实现重复动画

使用CSS动画和`v-if`或`v-show`

通过CSS定义动画效果，结合Vue的v-if或v-show控制元素的显示和隐藏，触发动画重复播放。例如，定义一个旋转动画：

<template>
  <div>
    <div v-if="show" class="rotate-animation"></div>
    <button @click="restartAnimation">重新播放动画</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    };
  },
  methods: {
    restartAnimation() {
      this.show = false;
      setTimeout(() => {
        this.show = true;
      }, 10);
    }
  }
};
</script>

<style>
.rotate-animation {
  width: 50px;
  height: 50px;
  background-color: red;
  animation: rotate 2s linear infinite;
}

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

使用Vue的过渡和动画系统

Vue提供了<transition>和<transition-group>组件，可以结合CSS或JavaScript钩子实现动画。通过动态改变key属性强制重新渲染元素，实现动画重复播放。

<template>
  <div>
    <transition name="fade" mode="out-in">
      <div :key="animationKey" class="box"></div>
    </transition>
    <button @click="restartAnimation">重新播放动画</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      animationKey: 0
    };
  },
  methods: {
    restartAnimation() {
      this.animationKey += 1;
    }
  }
};
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.box {
  width: 50px;
  height: 50px;
  background-color: blue;
}
</style>

使用第三方动画库

引入如Animate.css或GSAP等动画库，可以更方便地实现复杂的重复动画效果。例如使用Animate.css：

<template>
  <div>
    <div class="animated infinite bounce" v-if="show">跳动的元素</div>
    <button @click="restartAnimation">重新播放动画</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    };
  },
  methods: {
    restartAnimation() {
      this.show = false;
      setTimeout(() => {
        this.show = true;
      }, 10);
    }
  }
};
</script>

<style>
@import 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css';
</style>

使用JavaScript动画库（如GSAP）

通过GSAP实现更灵活的控制，例如重复播放动画：

<template>
  <div>
    <div ref="box" class="box"></div>
    <button @click="restartAnimation">重新播放动画</button>
  </div>
</template>

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

export default {
  methods: {
    restartAnimation() {
      gsap.to(this.$refs.box, {
        duration: 1,
        x: 100,
        rotation: 360,
        ease: 'bounce',
        onComplete: this.restartAnimation
      });
    }
  },
  mounted() {
    this.restartAnimation();
  }
};
</script>

<style>
.box {
  width: 50px;
  height: 50px;
  background-color: green;
}
</style>