Vue动画封装的两种方式
有两种方式封装动画效果css和js方式
css封装动画
首先使用css封装的方式实现封装组件动画(组件封装)
Vue.component('trans',{
template:`
<transition>
<slot></slot>
</transition>
`,
})html中调用组件
<div id="app">
<trans v-if="show"><h1>十月梦想</h1></trans>
<button @click="get">get</button>
</div>vue实例调取的方法
var app=new Vue({
el:"#app",
data:{
show:true
}, methods:{
get:function(){
this.show=!this.show
}
}
})书写动画不同时段的css
.v-enter,.v-leave-to{
opacity: 0;
}
.v-enter-active,.v-leave-active{
transition: opacity 3s;
}js封装动画(推荐)
定义组件
Vue.component('tran',{
template:`
<transition velocity>
<slot @before-enter="beforeEnter" @enter="handleEnter" @after-enter="afterEnter"></slot>
</transition>
`,
methods:{
beforeEnter:(el)=>{
el.style.opacity=0
console.log('before')
},
handleEnter:(el,done)=>{
Velocity(el,{opacity:1,color:'red'},{duration:5000},{complete:done()})
// el.style.color="red";
// done();
},
afterEnter:()=>{
console.log('after')
}
}
})js方式我们需要引入之前的velocity.js,所需属性放入tempalate中,在模板的插槽中定义动画三个状态!
此时我们需要书写css的代码了!直接一个组件就能完整实现这个动画过渡效果!因此我们以后封装时候更加推荐这个js封装动画方式!
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-9-16，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录