Vue10---animation package

In business, we may use an animation effect multiple times, so we can encapsulate this effect.

The following is a simple animation package. The effect is that the font changes from red to green. When packaging the animation effect into a component, it is recommended to write the implementation effect into methods instead of style, so that you only need to call this component. There is no need to write the style style externally.

<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>

Effect: