vue之动画及过渡效果
1、自定义css样式实现
css(注：若未定义transition的name，默认未v-)
2、css实现
引入css动画库
页面
<#--css动画-->
<#--定义动画时长以transition的为准-->
:duration="{entity:5000,leave:10000}" <#--自定义动画时长-->
appear <#--初始动画效果-->
enter-active-class="animated bounce fade-enter-active" <#--入场动画-->
leave-active-class="animated bounceOut fade-leave-active" <#--出场动画-->
appear-active-class="animated swing"> <#--初始动画效果-->
Hello Lucy
js
//css动画
var transition=new Vue({
el:'#transition',
data:{
show:true
},
methods:{
change:function () {
this.show=!this.show
}
}
});3、js实现
引入js动画库
页面
<#--js动画-->
Hello Lucy
Bye Lucy
js：
//js动画
Vue.component("one",{
template:'one '
});
Vue.component("two",{
template:'two '
});
var velocity=new Vue({
el:'#velocity',
data:{
show:'one'
},
methods:{
change:function () {
this.show= this.show==='one'?'two':'one'
},
handerBeforeEnter:function (el) {//动画进入前
el.style.opacity=0 //透明度
},
handerEnter:function (el,done) {//进入动画时
Velocity(el,{opacity:1},{duration:1000,complete:done}) //duration:1000动画效果1s;complete:done 回调，表示结束（velocity文档有）
},
handerAfterEnter:function () {//进入动画后
console.log("动画结束")
}
}
});4、列表动画实现
页面（注：列表使用transition-group）
{{item.title}}
js：
//列表动画
var count=0;
var transitionGroup=new Vue({
el:'#transitionGroup',
data:{
list:[]
},
methods:{
handelClick:function () {
this.list.push({
id:count++,
title:"hello world"
})
}
}
});5、使用组件封装动画及过渡效果
页面
<#--封装动画组件-->
Hello Lucy
js
// 封装动画组件
Vue.component('child',{
props:['show'],
template:'' +
' ',
methods:{
handerBeforeEnter:function (el) {//动画进入前
el.style.opacity=0 //透明度
},
handerEnter:function (el,done) {//进入动画时
Velocity(el,{opacity:1},{duration:1000,complete:done}) //duration:1000动画效果1s;complete:done 回调，表示结束（velocity文档有）
},
handerAfterEnter:function () {//进入动画后
console.log("动画结束")
}
}
});
var componentTransition=new Vue({
el:'#componentTransition',
data:{
show:true
},
methods:{
change:function () {
this.show=!this.show
}
}
});