Vue_动画封装

我们写一个动画效果，如果在页面多处调用，就可以封装在一个组件里。使用插槽的形式。

eg：

<fade :show='showfade'>
   <div>hello  world</div>
</fade>

<fade :show='showfade'>
  <h1>hello  world</h1>
</fade>
<button @click = 'fadeClick'>动画封装</button>

methods:{
 fadeClick:function(){
     this.showfade = !this.showfade;
 }
}
//往动画组件传值'showfade',传的是表达式，要加冒号

我们定义的动画插件叫fade，需要执行的动画要包含在fade标签里，同时向fade组件传入控制显示隐藏的参数

在fade组件中：

<template>
  <div class="fade">
      <transition 
      @before-enter='fadebeforeEnterClick'
      @enter='fadeEnterClick'
      @after-enter='fadeafterEnterClick'
      >   
      <slot v-if='show'></slot>
      </transition>
  </div>
</template>
<script>
export default{
 props:['show'],
 data(){
    return{
        show:this.show
    }
 },
 methods:{
  fadebeforeEnterClick:function(el){
    el.style.color ='red'
  },
  fadeEnterClick:function(el,done){
      setTimeout(()=>{
        el.style.color = 'green'
      },2000),
      setTimeout(()=>{
        done()
      },4000)
  },
fadeafterEnterClick:function(el){
    el.style.color='#000'
  }
 }
} 
</script>
<style scoped>

h1  {
  color:#42b983;
}
</style>

当然，我们也可以用css动画定义在style中。效果：