如何進行動畫封裝,讓動畫變的可複用,看下面代碼
.fade-enter,.fade-leave-to{
opacity: 0;
}
.fade-enter-active,
.fade-leave-active{
transition: opacity 1s;
}
<div id="root">
<transition name="fade">
<div v-show="show">hello world</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
let vm = new Vue({
el: '#root',
data: {
show:true
},
methods: {
handleClick() {
this.show = !this.show
}
}
})
上面代碼是非常簡單的,顯示隱藏效果,在項目中,可以會用很多地方會用到這種效果,那我們該如何實現封裝呢?
.fade-enter,.fade-leave-to{
opacity: 0;
}
.fade-enter-active,
.fade-leave-active{
transition: opacity 1s;
}
<div id="root">
<transition name="fade">
<div>hello world</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
Vue.component('fade',{
props:['show'],
template:`<transition name="fade">
<slot v-if="show"></slot>
</transition>`
})
let vm = new Vue({
el: '#root',
data: {
show:true
},
methods: {
handleClick() {
this.show = !this.show
}
}
})
使用要封裝的內容寫成組件,並用slot
插槽接管組件內容,就能實現動畫封裝了。看下面代碼:
<div id="root">
<fade :show="show">
<h1>hello world</h1>
</fade>
<fade :show="show">
<div>hello world</div>
</fade>
<button @click="handleClick">toggle</button>
</div>
如果需求想把樣式也一起封裝該怎麼實現呢?這裏就要用到js
動畫了,看下面代碼
<div id="root">
<transition name="fade">
<div>hello world</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
Vue.component('fade',{
props:['show'],
template:`
<transition name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@afterEnter="handleAfterEnter"
>
<slot v-if="show">hello world</slot>
</transition>`,
methods: {
handleBeforeEnter(el){
el.style.color = 'red'
},
handleEnter(el,done){
setTimeout(()=>{
el.style.color = 'green'
done()
},2000)
},
handleAfterEnter(el){
setTimeout(()=>{
el.style.color = 'blue'
},2000)
}
}
})
let vm = new Vue({
el: '#root',
data: {
show:true
},
methods: {
handleClick() {
this.show = !this.show
}
}
})
上面代碼用了js
提供的鉤子動畫before-enter
、enter
、after-enter
,用這種方法寫,所有的動畫都寫在了組件裏,外部只需要調用這個fade
組件就可以了,也不需要全局去寫一些樣式了,這種動畫的封裝是比較推薦的一種動畫封裝,因爲它可以把所有動畫的實現完整的封裝在一個組件中。