Vue在插入、更新或者移除DOM的时候,提供多种方式的应用过渡效果
包括以下工具:
- 在CSS过渡和动画中自动应用class
- 可以配合第三方css动画库,如Animate.css
- 在过渡钩子函数中使用JavaScript直接操作DOM
- 可以配合使用第三方JavaScript动画库,如Velocity.js
单元素/组件的过滤
Vue提供了transition
的封装组件,在下面的情况中,可以给任何元素和组件增加了entering/leaving过渡
- 条件渲染(v-if)
- 条件渲染(v-show)
- 动态组件
- 组件根节点
例子:点击鼠标实现淡入淡出
<div id="demo">
<button v-on:click="show = !show">Toggle</button>
<transition name="fade">
<p v-if="show">HELLO</p>
</transition>
</div>
<script type="text/javascript">
new Vue({
el : "#demo",
data : {
show: true
}
});
</script>
<style type="text/css" rel="stylesheet">
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-active {
opacity: 0;
}
</style>
当插入和删除包含在transition
组件的元素时,Vue会做以下处理:
- 自动嗅探目标元素是否应用了CSS过渡或动画,如果是,在适当的时机添加/删除CSS类名
- 如果过渡组件提供了JavaScript钩子函数,这些钩子函数会在适当的时候被调用
- 如果没有找到JavaScript钩子函数并且没有检测到CSS过渡/动画,DOM操作(插入/删除)在下一帧中立即执行(此处的浏览器逐帧动画机制,与Vue,和Vue的
nextTick
概念不同)
#过渡的-css-类名:
会有四个(CSS类)名在enter/leave的状态中切换
1.v-enter
:定义进入过渡的开始状态,在元素被插入的时生效,在下一个帧移除
2.v-enter-active
:定义进入过渡的结束状态,在元素被插入的时候生效,在transition/animation
完成之后移除
3.v-leave
:定义离开过渡的开始状态,在离开过渡被触发时生效,在下一帧移除
4.v-leave-active
:定义离开过渡的开始状态,在离开过渡被触发时生效,在下一个帧移除
对于这些在enter/leave
过渡切换的类名,v-
是这些类名的前缀,使用<transition name="my-transition">
可以重置前缀,比如v-enter
替换为 my-transition-enter
# CSS过渡
常用的过渡都是使用CSS过渡
<div id="demo-slide">
<button v-on:click="show = !show">Slide</button>
<transition name="slide">
<p v-if="show">message</p>
</transition>
</div>
<script type="text/javascript">
new Vue({
el : "#demo-slide",
data: {
show : true
}
});
</script>
.slide-enter-active {
transition: all .3s ease;
}
.slide-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-enter,.slide-leave-active {
transform: translateX(10px);
opacity: 0;
}
# CSS动画
CSS动画用法同CSS过渡,区别是在动画中v-enter
类名在节点中插入DOM后不会立即删除,而是animationend
事件触发时删除
<div id="demo-animate">
<button @click="show = !show">Toggle show</button>
<transition name="bounce">
<p v-if="show">Look at me!</p>
</transition>
</div>
<script type="text/javascript">
new Vue({
el : "#demo-animate",
data : {
show : true
}
});
</script>
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-out .5s;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
@keyframes bounce-out {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(0);
}
}
# 自定义过渡类名
可以通过下面的特征来自定义过渡类名:
enter-class
enter-active-class
leave-class
leave-active-class
上面的优先级高于普通的类名,这对Vue的过渡系统和其他第三方CSS动画库,如animate.css结合使用非常有用
示例:
<div id="demo1">
<button @click="show = !show"