1、自定义css样式实现
css(注:若未定义transition的name,默认未v-)
<style>
.v-enter,
.v-leave-to{
<#--过渡效果 透明度-->
opacity:0;
}
.v-enter-active,
.v-leave-active{
transition:opacity 3s;
}
</style>
2、css实现
引入css动画库
<!--animate css动画库-->
<link href="/animate/css/animate.css" rel="stylesheet">
页面
<#--css动画-->
<div id="transition">
<transition name="fade"
<#--type="transition"--> <#--定义动画时长以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"> <#--初始动画效果-->
<div v-show="show">Hello Lucy</div>
</transition>
<button @click="change">查看动画过度效果</button>
</div>
js
//css动画
var transition=new Vue({
el:'#transition',
data:{
show:true
},
methods:{
change:function () {
this.show=!this.show
}
}
});
3、js实现
引入js动画库
<!--velocity js动画库-->
<script type="text/javascript" src="/velocity/js/velocity.min.js"></script>
页面
<#--js动画-->
<div id="velocity">
<!--结束类似,@before-leave @leave @after-leave-->
<transition
name="fade"
mode="out-in"
@before-enter="handerBeforeEnter"
@enter="handerEnter"
@after-enter="handerAfterEnter" >
<component :is="show"></component>
<onekey="hello">Hello Lucy</one>
<twokey="bye">Bye Lucy</two>
</transition>
<button @click="change">查看动画过度效果</button>
</div>
js:
//js动画
Vue.component("one",{
template:'<li>one</li>'
});
Vue.component("two",{
template:'<li>two</li>'
});
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)
<div id="transitionGroup">
<transition-group name="fade">
<div v-for="item in list" :key="item.id">{{item.title}}</div>
</transition-group>
<button @click="handelClick">添加列表元素</button>
</div>
js:
//列表动画
var count=0;
var transitionGroup=new Vue({
el:'#transitionGroup',
data:{
list:[]
},
methods:{
handelClick:function () {
this.list.push({
id:count++,
title:"hello world"
})
}
}
});
5、使用组件封装动画及过渡效果
页面
<#--封装动画组件-->
<div id="componentTransition">
<child :show="show">
<div>Hello Lucy</div>
</child>
<button @click="change">切换</button>
</div>
js
// 封装动画组件
Vue.component('child',{
props:['show'],
template:'<transition ' +
'@before-enter="handerBeforeEnter"' +
'@enter="handerEnter"' +
'@after-enter="handerAfterEnter">' +
'<slot v-if="show"></slot>' +
'</transition>',
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
}
}
});