vue过渡
1.css过渡
1)内置Class类名
类名的添加以及切换取决于transition特性的值,例如transition=‘boom’,会有3个内置类名:
①.boom-trasition————始终保留在元素上
②.boom-enter————定义进入过渡的开始状态
③.boom-leave————定义进入过渡的结束状态
2)自定义css类名
代码示例如下:
<div v-show="ok" class="animated" transition="bounce">Watch me bounce</div>
Vue.transition('bounce',{
enterClass: 'bounceInLeft',
leaveClass: 'bounceOutRight'
})
3) 显式声明css过渡类型
基于所使用的css,该事件要么是transitionend,要么是animationend。
代码示例如下:
Vue.transition('bounce',{
//该过渡效果将只侦听'animationend'事件
type: 'animation'
})
4)过渡流程
以下面的结构为例来说明css内部是如何处理过渡的
<div v-show="show" transition="">Transition example</div>
①如果show变为false,Vue.js将:
➢调用beforeLeave钩子;
➢将v-leave类名添加到元素上以触发过渡;
➢调用leave钩子;
➢等待过渡结束(监听transitionend事件);
➢从DOM中删除元素并删除v-leave类名;
➢调用afterLeave钩子。
②如果show变为true, Vue.js将:
➢调用beforeEnter钩子;
➢将v-enter类名添加到元素上;
➢把它插入DOM中;
➢调用enter钩子;
➢强制一次CSS布局,让v-enter确实生效。然后删除v-enter类名,以触发过渡,回到元素的原始状态;
➢等待过渡结束;
➢调用afterEnter钩子。
2.js过渡
当只使用js过渡时,enter 和 leave 需要调用done回调(否则将被同步调用,过渡将立即结束)
使用jQuery来注册一个自定义的js过渡,代码示例如下:
Vue.transition('fade', {
css: false,
enter: function (el, done) {
//元素已被插入DOM中
//在动画结束后调用done
$(el)
.css('opacity', 0)
.animate({ opacity: 1 },1000, done)
},
enterCancelled: function (el) {
$ (el) .stop()
},
leave: function (el, done) {
//与enter相同
$(el).animate( {opacity: 0 }, 1000, done)
},
leaverCancelled: function (el) {
$ (el) .stop()
}
})
然后在transition特性中声明,代码示例如下:
<p transition="fade"> </p>
完整的注册一个js过渡的代码示例如下:
Vue.transition(ID,{
enter:function() {},
leave:function() {}
})
3.渐进过渡
transition与v-for一起使用可以创建渐进过渡,即让v-for中的每个过渡项目可以依次产生过渡效果,而不是一次性同步产生过渡效果。