当前位置：首页 > VUE

vue实现动画代码

2026-03-10 00:35:36VUE

Vue 动画实现方法

Vue 提供了多种方式实现动画效果，包括内置的过渡组件、CSS 动画库集成以及第三方动画库（如 GSAP）。以下是常见实现方法：

使用 Vue 过渡组件

通过 <transition> 和 <transition-group> 组件实现元素进入/离开的动画：

<template>
  <button @click="show = !show">Toggle</button>
  <transition name="fade">
    <p v-if="show">Hello Vue!</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 实现更复杂的动画逻辑：

<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) {
      let opacity = 0
      const interval = setInterval(() => {
        opacity += 0.1
        el.style.opacity = opacity
        if (opacity >= 1) {
          clearInterval(interval)
          done()
        }
      }, 100)
    },
    leave(el, done) {
      let opacity = 1
      const interval = setInterval(() => {
        opacity -= 0.1
        el.style.opacity = opacity
        if (opacity <= 0) {
          clearInterval(interval)
          done()
        }
      }, 100)
    }
  }
}
</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>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' }
      ],
      nextId: 3
    }
  },
  methods: {
    addItem() {
      this.items.push({
        id: this.nextId++,
        text: 'Item ' + this.nextId
      })
    }
  }
}
</script>

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

状态动画

通过数据变化驱动动画：

vue实现动画代码

<template>
  <div>
    <input v-model.number="number" type="number" step="20">
    <div class="bar" :style="{ width: number + 'px' }"></div>
  </div>
</template>

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

<style>
.bar {
  height: 20px;
  background: blue;
  transition: width 0.5s ease;
}
</style>