在业务中我们可能对一个动画效果进行多次的使用,那么就可以对这个效果进行封装。
下面进行一个简单的动画封装,效果为字体由红变成绿色,将动画效果封装成一个组件的时候,建议将实现效果写到methods里面,而不是style里,这样只需要调用此组件就可以,不必写在外部写style样式了。
<template>
<div>
<fade :show="show">
<h1 >hello world</h1>
</fade>
<button @click="handleFade">动画封装</button>
</div>
</template>
<script>
export default {
name: "animate-test",
data(){
return{
show:true,
}
},
components:{
'fade':{
//推荐将动画封装到methods里,而不是style里
template:`<transition name="fengzhuang" @before-enter="handleBeforeEnter"
@enter="handleEnter"
><slot v-if="show"></slot></transition>`,
props:['show'],
methods: {
handleBeforeEnter(el){
el.style.color = 'red'
},
handleEnter(el,done){
setTimeout(() => {
el.style.color = 'green';
done()
},2000)
}
}
}
},
methods:{
handleFade(){
this.show = !this.show
}
}
}
</script>
效果: