学习要点：
1.转场效果
本节课我们来开始学习 Vue3.x 的动画和转场效果的简单演示。
一．转场效果
1. 动画效果并不是 Vue 的核心功能，这里简单的了解下即可，原因如下：
(1) . 内容不难，但繁杂(主要 CSS 调用多)；
(2) . 学了一个，其它的参考手册，对应着搭建即可完成效果；
2. 我们就选择一个讲解即可，“进场和离场”效果用的比较多一些；
3. 创建一个按钮、要切换进场和离场的内容，以及设置默认显示的属性；
<div id="app">
<p v-if="show">显示/隐藏p>
<button>切换{{show}}button>
div>
data() {
return {
show : true
}
}
4. 用一个表达式来实现简单的布尔值的切换功能，具体如下：
<button v-on:click="show = !show">切换{{show}}button>
5. 构建所需进场和离场的 CSS，推荐复制官方的，然后根据自己需求修改；
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}
style>
6. 最后一步，使用 Vue 的效果组件来实现过渡效果；
<transition name="fade">
<p v-if="show">显示/隐藏p>
transition>
PS：这是手册上的第一个小案例，我们一句句分析一下；
(1) .show : true，用于判断 dom 节点 p 状态；
(2) .show = !show，注意这里不是!=，而是!show，表示 show=true|false；
(3) .是 Vue 过渡动画组件，包含在里面才能实现动画效果；
(4) .name=fade，定义 CSS 样式的前缀名称，都已 fade 为前缀；
PS：在进入过渡或离开的过程中，有 6 种 class 可供切换，没有 name 默认为 v：
(1) .v-enter：进入过渡的开始状态；
(2) .v-enter-active：进入过渡的生效状态；
(3) .v-enter-to：进入过渡的结束状态；
(4) .v-leave：离开过渡的开始状态；
(5) .v-leave-active：离开过渡的生效状态；
(6) .v-leave-to：离开过渡的结束状态；
本文由:兰州启点网络（
www.lzqidian.com)整理发布!
启点CMS演示地址及账号
