从基础到进阶：全面掌握 Vue 动画效果实现技巧

最新推荐文章于 2025-06-30 23:10:09 发布

乐闻x

最新推荐文章于 2025-06-30 23:10:09 发布

阅读量1.1k

点赞数 21

CC 4.0 BY-SA版权

分类专栏： Vue 进阶笔记手册文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_37890289/article/details/143984142

Vue 进阶笔记手册专栏收录该内容

48 篇文章

订阅专栏

前言

动画效果在Web开发中扮演着重要角色，不仅提升了用户体验，还增强了网页的视觉吸引力，Vue.js 不仅在构建用户界面方面表现出色，还提供了简洁而强大的动画实现方式。通过合理使用Vue的动画系统，我们能够轻松构建出流畅、自然的过渡效果。本文将深入探讨如何在Vue中实现页面动画效果，帮助开发者打造出更具吸引力的Web应用。

Transition 动画

Vue 提供了一个内置的组件，它能够轻松实现元素的进入和离开动画。首先，我们来了解一下组件的基本用法。

1. 基本用法

在 Vue 中，我们可以使用标签包裹需要添加动画的元素。例如，我们希望一个 div 元素在显示和隐藏时有动画效果，可以这样写：

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

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

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

在上面的例子中，我们使用了组件，并给它指定了一个 name 属性为 “fade”。这个名字会自动生成以下几个 CSS 类：

fade-enter
fade-enter-active
fade-leave-active
fade-leave-to (在 2.1.8+ 版本中)

通过这些类，我们可以定义元素在进入和离开时的动画效果。这里我们用 opacity 属性来实现淡入淡出的效果。

2. 自定义类名

除了默认的类名，我们还可以自定义类名。比如我们希望使用自己的类名，我们可以这样配置：

<transition
  enter-active-class="my-enter"
  leave-active-class="my-leave"
>
  <div v-if="show">Hello Vue!</div>
</transition>

<style>
.my-enter {
  transition: opacity 1s;
  opacity: 0;
}
.my-leave {
  transition: opacity 1s;
  opacity: 1;
}
</style>

通过 enter-active-class 和 leave-active-class 属性，我们可以指定自定义的 CSS 类名，用于控制动画效果。

3. 过渡模式

Vue 还提供了过渡模式，以处理元素在进入和离开时的动画衔接。常见的模式有两个：

in-out: 新元素先进行过渡，旧元素之后进行过渡。
out-in: 旧元素先进行过渡，完成之后新元素进行过渡。

示例：

<transition name="fade" mode="out-in">
  <div v-if="show">Hello Vue!</div>
</transition>

使用实现列表动画

当我们需要对一组元素进行动画处理时，Vue 提供了组件。该组件允许我们对列表中的每个元素进行过渡效果。

1. 基本用法

假设我们有一个列表，我们希望在添加和删除列表项时有动画效果，可以这样实现：

<template>
  <div id="app">
    <button @click="addItem">Add Item</button>
    <transition-group name="list" tag="ul">
      <li v-for="item in items" :key="item" class="list-item">
        {{ item }}
        <button @click="removeItem(item)">Delete</button>
      </li>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3, 4, 5]
    }
  },
  methods: {
    addItem() {
      this.items.push(this.items.length + 1)
    },
    removeItem(item) {
      this.items = this.items.filter(i => i !== item)
    }
  }
}
</script>

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

在这个例子中，我们使用了组件，并指定了 name 属性为 “list”。和一样，这会生成以下 CSS 类：

list-enter
list-enter-active
list-leave-active
list-leave-to

我们可以通过这些类定义列表项在添加和删除时的动画效果。

2. 动画顺序控制

有时候我们希望控制列表项的动画顺序，例如从上到下依次出现。我们可以通过 stagger 这种方法来实现：

<template>
  <div id="app">
    <button @click="addItem">Add Item</button>
    <transition-group name="stagger" tag="ul">
      <li v-for="item in items" :key="item" class="list-item">
        {{ item }}
        <button @click="removeItem(item)">Delete</button>
      </li>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3, 4, 5]
    }
  },
  methods: {
    addItem() {
      this.items.push(this.items.length + 1)
    },
    removeItem(item) {
      this.items = this.items.filter(i => i !== item)
    }
  }
}
</script>

<style>
.stagger-enter-active {
  transition: all 0.5s;
}
.stagger-leave-active {
  transition: all 0.5s;
  position: absolute;
}
.stagger-enter, .stagger-leave-to /* .stagger-leave-active in <2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}
.stagger-enter-active {
  transition-delay: calc(var(--index) * 0.1s);
}
</style>

通过使用 CSS 变量 --index 和 transition-delay 属性，我们可以实现列表项按顺序依次出现的动画效果。

使用动画库

除了内置的过渡动画，我们还可以使用第三方动画库，如 Animate.css 或者 Velocity.js。

1. Animate.css

Animate.css 是一个非常流行的 CSS 动画库。我们可以通过引入 Animate.css 文件，并在 Vue 中使用对应的类名来实现动画效果。

首先，引入 Animate.css：

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>

然后在 Vue 中使用：

<transition
  enter-active-class="animate__animated animate__fadeIn"
  leave-active-class="animate__animated animate__fadeOut"
>
  <div v-if="show">Hello Vue!</div>
</transition>

2. Velocity.js

Velocity.js 是一个强大的 JavaScript 动画库。Vue.js 提供了对 Velocity.js 的原生支持。首先，需要安装 Velocity：

npm install velocity-animate

然后在 Vue 中使用：

<template>
  <div id="app">
    <button @click="show = !show">Toggle</button>
    <transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:leave="leave"
    >
      <div v-if="show">Hello Vue!</div>
    </transition>
  </div>
</template>

<script>
import Velocity from 'velocity-animate'

export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0
    },
    enter(el, done) {
      Velocity(el, { opacity: 1 }, { duration: 1000, complete: done })
    },
    leave(el, done) {
      Velocity(el, { opacity: 0 }, { duration: 1000, complete: done })
    }
  }
}
</script>

通过 before-enter、enter 和 leave 钩子方法，我们可以在元素进入和离开时使用 Velocity 实现动画效果。

使用 Vue 动画生态系统

Vue 社区提供了许多动画库和工具，可以帮助我们实现更加复杂和丰富的动画效果。

1. Vue Router 动画

在单页面应用中，页面切换时的动画也是提升用户体验的一个重要方面。Vue Router 提供了原生的过渡支持。

<template>
  <div id="app">
    <router-view v-slot="{ Component }">
      <transition name="fade" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

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

通过使用的 v-slot，我们可以在页面切换时应用过渡动画。

2. Vue 动画插件

除了 Vue 官方提供的动画支持，社区也开发了许多优秀的插件，例如 vue-transition-expand、vue-lottie 等。

vue-transition-expand

vue-transition-expand 是一个用于元素展开和折叠动画的插件。可以通过以下方式使用：

npm install @vue/composition-api vue-transition-expand

然后在组件中使用：

<template>
  <div id="app">
    <button @click="show = !show">Toggle</button>
    <transition-expand>
      <div v-if="show" class="expand-box">
        I am expandable!
      </div>
    </transition-expand>
  </div>
</template>

<script>
import { TransitionExpand } from 'vue-transition-expand'

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

<style>
.expand-box {
  background: #42b983;
  color: white;
  padding: 10px;
}
</style>

vue-lottie

vue-lottie 是一个用于在 Vue 应用中轻松集成 Lottie 动画的插件。

npm install vue-lottie

然后在组件中使用：

<template>
  <div id="app">
    <lottie :options="defaultOptions" height="400" width="400"></lottie>
  </div>
</template>

<script>
import Lottie from 'vue-lottie'
import animationData from './path/to/animation.json'

export default {
  components: {
    Lottie
  },
  data() {
    return {
      defaultOptions: {
        loop: true,
        autoplay: true,
        animationData: animationData,
        rendererSettings: {
          preserveAspectRatio: 'xMidYMid slice'
        }
      }
    }
  }
}
</script>

通过这些插件，我们可以轻松在 Vue 应用中集成复杂的动画效果。

总结

总的来说，借助Vue内置的动画功能和丰富的第三方库，开发者可以轻松实现多种多样的动画效果，提升应用的用户体验和交互性。本文详细介绍了从基础的和组件，到结合 Animate.css 和 Velocity.js 等第三方动画库，再到利用 Vue 动画生态系统中的优秀插件，帮助开发者在项目中灵活运用这些技术。这些工具和技巧不仅能为用户提供更佳的视觉效果，还能使应用更加生动有趣。