Vue.js 开发实战：如何实现有效的过渡和动画效果？

过渡和动画基础

过渡和动画概述

Vue 在插入、更新或者移除 DOM 时，提供了多种过渡效果。

过渡，就是从一个状态向另外一个状态插入值，新的状态替换了旧的状态。

Vue 提供了内置的过渡封装组件 transition，可以结合 CSS 动画 @keyframes 实现动画效果。

transition 组件

Vue 提供了内置的过渡封装组件，即 transition 组件。

transition 组件的基本用法：

<!-- 过渡类名前缀：替换过渡类的v-前缀 --> <transition name="过渡类名前缀"> <!-- 需要添加过渡的元素 --> <!-- 组件在同一时间内只能有一个元素显示 --> <div></div> </transition>

Vue 为 transition 标签内部的元素提供了 3 个进入过渡的类和 3 个离开过渡的类。