Vue 提供了 transition
的封装组件,在条件渲染,展示,动态组件等情形中,可以给任何元素和组件添加进入/离开过渡。
例子:(点击按钮,下面的字展示与消失)
html
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
script
new Vue({
el: '#demo',
data: {
show: true
}
})
css
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
注意:对于这些在过渡中切换的类名来说,如果你使用一个没有名字的 <transition>
,则 v-
是这些类名的默认前缀。如果你使用了 <transition name="fade">
,那么前缀会换成fade-
。
下面是官网对6个class切换的解释:
1、v-enter
:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。
2、v-enter-active
:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
3、v-enter-to
: 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter
被移除),在过渡/动画完成之后移除。(2.1.8版本及以上)
4、v-leave
: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
5、v-leave-active
:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
6、v-leave-to
: 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave
被删除),在过渡/动画完成之后移除。(2.1.8版本及以上)
看图可能理解的会更清晰一些:
项目中应用到的实例:
<transition name="info-mask">
<div class="dialog-mask" v-show="show">
<div class="info-dialog">
<div class="info-dialog-con">
<input type="text" name="name" placeholder="请输入姓名" v-model="name">
<input type="text" name="phone" placeholder="请输入手机号" v-model="phone">
<div class="submitBtn">
<span class="enableBtn">提交</span>
</div>
</div>
</div>
</div>
</transition>
点击按钮弹出一个输入框,要求用户输入姓名手机号等信息,在项目中对这个输入框的弹出关闭增加了动效
.info-mask-enter-active, .info-mask-leave-active {
transition: all ease .3s;
}
.info-mask-enter, .info-mask-leave-to {
opacity: 0;
}
那么info-mask作为样式类名的前缀,弹框在show或是close的时候用0.3s做出缓慢过渡的效果。