Vue 2.x 中的 Transition 动画详解

最新推荐文章于 2025-12-01 15:24:40 发布

原创

最新推荐文章于 2025-12-01 15:24:40 发布 · 1.5k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#VUE #HTML #web #vue框架 #前端

在这里插入图片描述

Vue 2.x 中的 Transition 动画详解

在现代 Web 应用中，动画效果是提升用户体验的重要手段之一。Vue.js 通过内置的 <transition> 组件，提供了简便的方式来为元素和组件的插入、更新与移除添加过渡效果。本文将详细介绍 Vue 2.x 中 <transition> 组件的基本概念、使用方法以及一些高级用法，并通过具体示例来展示如何利用 Vue 的动画特性来增强应用的表现力。

基本概念和作用

Vue 的 <transition> 组件是一个抽象的组件，它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。它的主要用途是给过渡中的组件添加类名，从而控制过渡动画的效果。通过 CSS 样式，我们可以定义这些类名对应的样式，从而实现过渡动画。

基本的过渡类名

v-enter: 定义被插入元素的第一个渲染快照之前的过渡效果。
v-enter-active: 定义过渡效果的持续时间、延迟及曲线函数。
v-enter-to: 定义元素被插入后过渡结束时的状态。
v-leave: 定义元素离开前的状态。
v-leave-active: 定义过渡效果的持续时间、延迟及曲线函数。
v-leave-to: 定义元素离开后的状态。

示例

示例一：基本的过渡效果

让我们从一个简单的例子开始，看如何使用 <transition> 组件来为元素添加一个淡入淡出的过渡效果。

<div id="app">
  <button @click="toggleVisibility">Toggle Visibility</button>
  <transition name="fade">
    <p v-if="isVisible">Hello Vue!</p>
  </transition>
</div>

<style scoped>
.fade-enter-active, .fade-leave-active {
     
     
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active 在 2.1.8 版本及以上 */ {
     
     
  opacity: 0;
}
</style>

<script>
new Vue({
  el: '#app',
  data: {
    isVisible: true
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
});

在这个例子中，点击按钮会切换 <p> 元素的可见性，并伴随淡入淡出的过渡效果。

示例二：使用过渡模式

过渡模式允许控制元素的进出顺序。Vue 提供了两种模式：out-in 和 in-out。

<div id="app">
  <button @click="changeView">Change View</button>
  <transition name="slide" mode="out-in">
    <component :is="currentView"></component>
  </transition>
</div>

<script>
new Vue({
     
     
  el: '#app',