如何进行动画封装,让动画变的可复用,看下面代码
.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
组件就可以了,也不需要全局去写一些样式了,这种动画的封装是比较推荐的一种动画封装,因为它可以把所有动画的实现完整的封装在一个组件中。