transition
包裹组件,在组件在下列情形中添加过渡效果
- v-if
- v-show
- 动态组件
- 组件根节点
如何使用
- 设置 name
<transition name="fade">
<div v-if="flag" class="box"></div>
</transition>
//开始过渡
.fade-enter-from{
background:red;
width:0px;
height:0px;
transform:rotate(360deg)
}
//开始过渡了
.fade-enter-active{
transition: all 2.5s linear;
}
//过渡完成
.fade-enter-to{
background:yellow;
width:200px;
height:200px;
}
//离开的过渡
.fade-leave-from{
width:200px;
height:200px;
transform:rotate(360deg)
}
//离开中过渡
.fade-leave-active{
transition: all 1s linear;
}
//离开完成
.fade-leave-to{
width:0px;
height:0px;
}- 自定义过渡 class 类名
enter-from-class
enter-active-class
enter-to-class
leave-from-class
leave-active-class
leave-to-class持续时间
<transition :duration="1000">...</transition>
<transition :duration="{ enter: 500, leave: 800 }">...</transition>配合 animate.css 使用
npm install animate.css
import 'animate.css'
<transition
leave-active-class="animate__animated animate__bounceInLeft"
enter-active-class="animate__animated animate__bounceInRight"
>
<div v-if="flag" class="box"></div>
</transition>生命周期
@before-enter="beforeEnter" //对应enter-from
@enter="enter"//对应enter-active
@after-enter="afterEnter"//对应enter-to
@enter-cancelled="enterCancelled"//显示过度打断
@before-leave="beforeLeave"//对应leave-from
@leave="leave"//对应enter-active
@after-leave="afterLeave"//对应leave-to
@leave-cancelled="leaveCancelled"//离开过度打断
transition-group
transition-group包裹一堆组件,对包裹的所有组件添加过渡效果
