一、概念
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>
标签的元素提供了三个进入过渡的类,和三个离开过渡的类。
进入过渡 | 离开过渡 |
---|
.v-enter :定义进入过渡的开始状态 | .v-leave :定义离开过渡的开始状态 |
.v-enter-to :定义进入过渡的结束状态 | .v-leave-to :定义离开过渡的结束状态 |
.v-enter-active :定义进入过渡生效时的状态 | .v-leave-active :定义离开过渡生效时的状态 |
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><transition name="fade">
<div class="h" v-if="show">hello world</div></transition>