当前位置：首页 > VUE

vue动画实现代码

2026-02-22 16:16:19VUE

Vue 动画实现代码

Vue 提供了内置的过渡和动画系统，主要通过 <transition> 和 <transition-group> 组件实现。以下是一些常见的动画实现方式：

基础过渡动画

通过 CSS 过渡实现元素的淡入淡出效果：

<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 动画

通过 CSS 关键帧动画实现更复杂的动画效果：

<template>
  <button @click="show = !show">Toggle</button>
  <transition name="bounce">
    <p v-if="show">Bouncing Text</p>
  </transition>
</template>

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

<style>
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
</style>

列表过渡

使用 <transition-group> 实现列表项的动画效果：

<template>
  <button @click="addItem">Add Item</button>
  <button @click="removeItem">Remove 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' },
        { id: 3, text: 'Item 3' }
      ],
      nextId: 4
    }
  },
  methods: {
    addItem() {
      this.items.push({
        id: this.nextId++,
        text: 'Item ' + this.nextId
      })
    },
    removeItem() {
      this.items.pop()
    }
  }
}
</script>

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

JavaScript 钩子动画

通过 JavaScript 钩子实现更精细的动画控制：

<template>
  <button @click="show = !show">Toggle</button>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave"
    :css="false"
  >
    <p v-if="show">JavaScript Animation</p>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0
      el.style.transform = 'scale(0)'
    },
    enter(el, done) {
      const animation = el.animate([
        { opacity: 0, transform: 'scale(0)' },
        { opacity: 1, transform: 'scale(1.2)' },
        { opacity: 1, transform: 'scale(1)' }
      ], {
        duration: 1000
      })
      animation.onfinish = done
    },
    leave(el, done) {
      const animation = el.animate([
        { opacity: 1, transform: 'scale(1)' },
        { opacity: 0, transform: 'scale(0)' }
      ], {
        duration: 800
      })
      animation.onfinish = done
    }
  }
}
</script>

第三方动画库集成

可以与 Animate.css 等第三方动画库集成：

<template>
  <button @click="show = !show">Toggle</button>
  <transition
    enter-active-class="animate__animated animate__bounceIn"
    leave-active-class="animate__animated animate__bounceOut"
  >
    <p v-if="show">Animate.css Animation</p>
  </transition>
</template>

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

<!-- 引入 Animate.css -->
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>

这些示例涵盖了 Vue 中实现动画的主要方法，可以根据具体需求选择合适的方式。

vue动画实现代码