一、概念
1. 实现条件：在需要有过渡效果的标签外面添加<transition></transition>。也就是说vue中被<transition></transition>包裹的元素才能实现过渡效果。
2. 注意
类名的说明：对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。
opacity的说明：在过渡动画的显示和隐藏会用opacity属性来表征。opacity:1 不透明（显示）| opacity:0 透明（不显示）
3. 原理
vue在加了<transition>标签的元素提供了三个进入过渡的类，和三个离开过渡的类。
进入过渡 | 离开过渡 |
|
|
|
|
|
|
4. 这6个类的生效时间
对于进入动画来说：
.v-enter | . v-enter-to | . v-enter-active |
定义过渡的开始状态 | 定义过渡的结束状态 | 定义过渡生效时的状态 |
插入之前生效 | 插入之后下一帧生效（同时 v-enter 被移除） | 动画整个过程生效 |
下一帧被移除 | 动画完成之后移除 | 动画整个过程生效 |
对于离开动画来说：
.v-leave | .v-leave-to | .v-leave-active |
定义过渡的开始状态 | 定义过渡的结束状态 | 定义过渡生效时的状态 |
离开过渡被触发时立刻生效 | 触发之后下一帧生效 (与此同时 v-leave 被删除） | 整个离开过渡的阶段中应用 |
下一帧被移除 | 动画完成之后移除 | 整个离开过渡的阶段中应用 |
5. 原理图
二、代码示例
定义一个长方体div，在点击按钮显示时，让高度从0增长到200px。切换隐藏时，让高度从200px减少到0.
//一个命名为fade的<transition>标签包裹着类名为h的<div>
<template>
<div @click="show=!show">按钮</div>
<transition name="slide">
<div class="h" v-if="show">hello world</div>
</transition>
</template><script>
data () {
return {
show:true
}
}
</script><style>
/* div的初始状态*/
.h {
width:100px;
height: 200px;
background-color: aqua;
}
-----------------------------------------------------------------------------------------
/**
* 定义进入动画和退出动画的过程
* 代表关注的是height的变化，动画的时间是5
*/
.slide-enter-active, .slide-leave-active {
transition: height 5s;
}
-----------------------------------------------------------------------------------------
/* 定义进入动画的初始状态*/
.slide-enter {
height: 0;
}
/* 定义进入动画的结束状态*/
.slide-enter-to {
height: 200px;
}
-----------------------------------------------------------------------------------------
/* 定义离开动画的初始状态*/
.slide-leave {
height: 200px;
}
/* 定义离开动画的结束状态*/
.slide-leave-to {
height: 0;
}
</style>
