当前位置：首页 > VUE

vue实现动画代码

2026-02-18 11:21:18VUE

以下是在Vue中实现动画的几种常见方法，包含代码示例和关键说明：

使用Vue内置过渡组件

Vue提供了<transition>和<transition-group>组件处理进入/离开动画：

vue实现动画代码

<template>
  <button @click="show = !show">Toggle</button>
  <transition name="fade">
    <p v-if="show">Hello Vue Animation</p>
  </transition>
</template>

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

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

使用CSS动画库

结合Animate.css等第三方库快速实现动画效果：

<template>
  <transition
    enter-active-class="animate__animated animate__bounceIn"
    leave-active-class="animate__animated animate__bounceOut"
  >
    <p v-if="show">Animated text</p>
  </transition>
</template>

<script>
import 'animate.css'
export default {
  data() { return { show: true } }
}
</script>

使用JavaScript钩子

通过JavaScript控制复杂动画逻辑：

vue实现动画代码

<template>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave"
    :css="false"
  >
    <div v-if="show" class="box"></div>
  </transition>
</template>

<script>
export default {
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0
    },
    enter(el, done) {
      anime({
        targets: el,
        opacity: 1,
        duration: 1000,
        complete: done
      })
    },
    leave(el, done) {
      anime({
        targets: el,
        opacity: 0,
        duration: 800,
        complete: done
      })
    }
  }
}
</script>

列表动画

使用<transition-group>处理动态列表：

<template>
  <button @click="addItem">Add Item</button>
  <transition-group name="list" tag="ul">
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </transition-group>
</template>

<style>
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

状态驱动动画

基于组件状态变化触发动画：

<template>
  <div 
    class="progress-bar" 
    :style="{ width: progress + '%' }"
    @transitionend="onTransitionEnd"
  ></div>
</template>

<script>
export default {
  data() {
    return { progress: 0 }
  },
  mounted() {
    setInterval(() => {
      this.progress = (this.progress + 10) % 100
    }, 1000)
  }
}
</script>

<style>
.progress-bar {
  height: 10px;
  background: #42b983;
  transition: width 0.5s ease;
}
</style>