作用
在插入、更新或移除DOM元素时,在合适的时候给元素添加样式类名。
使用步骤
1、准备样式
1)元素进入的样式:
- v-enter:开始入场
- v-enter-active:入场过程
- v-enter-to::入场结束
2)元素离开的样式 - v-leave:开始离场
- v-leave-active:离场过程
- v-leave-to:结束离场
2、使用标签包裹要过渡的元素,配置name属性:
<transition name="hello">
<h1 v-show="isShow">你好~</h1>
</transition>
3、若有多个元素需要过渡,需要用,且元素制定Key
<transition-group appear name="hello">
<h1 v-show="isShow" key="1">你好1~</h1>
<h1 v-show="isShow" key="2">你好2~</h1>
</transition-group>
例:
/* 开始入场 */
.hello-enter,.hello-leave-to{
/*
.hello代表是div的name
.hello-enter表动画开始入场
.helli-leave-to表离开动画结束
*/
transform: translateX(-100%);
}
/* 入场过程 */
.hello-enter-active,.hello-leave-active{
transition: 0.5s linear;
}
/* 结束入场 */
.hello-enter-to,.hello-leave{
transform: translateX(0);
}