vue js动画及动画封装

js动画钩子函数：@before-enter @enter @after-enter  @before-leave @leave @after-leave

http://velocityjs.org/#/duration

<template>
  <div>
    <button @click="change"> 触发动画</button>
    <p>vue 中列表动画</p>
    <!-- 离开动画的钩子函数是before-leave  -->
    <transition
    @before-enter='handleBeforeEnter'
    @enter='handleEnter'
    @after-enter='handleAfterEnter'
    >
       <div v-if="show">hello</div>
    </transition>

    <p>动画封装---------</p>
    <b1 :show='show'>
      <div>word</div>
    </b1>


  </div>
</template>

<script type="text/ecmascript-6">
import b1 from './B'
export default {
  data() {
    return {
      show: true,
    }
  },
  methods: {
    change() {
    this.show = !this.show
    },
    // 从隐藏到显示会触发这个函数
    handleBeforeEnter(el) {
      console.log(el);
      el.style.color = 'red'
    },
    // 真正运行动画会触发这个函数
    handleEnter(el, done) {
      console.log('1111');
      setTimeout(() =>{
        // 2s 之后变为pink
        el.style.color = 'pink'
      },2000)
      setTimeout(() =>{ 
        // done告诉vue 我们的动画执行完了
        done()
      },3000)
      
    },
    handleAfterEnter(el) {
      el.style.color = '#000'
    }
  },
  components: {
    b1
  }
}
</script>

<style lang="scss">

</style>

 动画封装 组件B

<template>
  <transition 
  @before-leave='handleLeaveEnter'
  @leave ='handleLeave'
  @after-leave='handleAferLeave'
  >
    <slot v-if="show"></slot>
  </transition>
</template>

<script type="text/ecmascript-6">
export default {
  props:['show'],
  methods: {
    handleLeaveEnter(el) {
      el.style.color = 'red'
    },
    handleLeave(el,done) {
      console.log(222);
      setTimeout(()=>{
        el.style.color = 'green'
      },2000)
      setTimeout(()=>{
        done()
      },3000)
    },
    handleAferLeave(el) {
      el.style.color = 'red'
    }
  },
}
</script>

<style>
.v-enter {
  opacity: 0;
}
.v-enter-active {
  transition: opacity 2s;
}
</style>