Vue10---动画封装

在业务中我们可能对一个动画效果进行多次的使用，那么就可以对这个效果进行封装。

下面进行一个简单的动画封装，效果为字体由红变成绿色,将动画效果封装成一个组件的时候，建议将实现效果写到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>

效果：