vue的JS动画——动画钩子

https://www.jianshu.com/p/55305c53de13

transition动画钩子初识：

  <div id="root">
    <transition name='fade'
      @before-enter='handleBeforeEnter'
      @enter='handleEnter'
      @after-enter='handleAfterEnter'
    >
      <h1 v-show='show'>
        最是年少时模样
      </h1>
    </transition>
    <button @click='change'>切换</button>
  </div>
  <script>
    var vm=new Vue({
      el:'#root',
      data:{
        show:true
      },
      methods:{
        change:function(){
          this.show=!this.show;
        },
        handleBeforeEnter:function(el){
          console.log('before');
          el.style.color='red'
        },
        handleEnter:function(el,done){
          console.log('enter');
          setTimeout(()=>{
            el.style.color='green'
          },2000)
          setTimeout(()=>{
            done();
          },4000)
        },
        handleAfterEnter:function(el){
          console.log('after');
          el.style.color='#000000'
        }
      }
    })
  </script>

 使用velocity.js

  <div id="root">
    <transition name='fade'
      @before-enter='handleBeforeEnter'
      @enter='handleEnter'
      @after-enter='handleAfterEnter'
    >
      <h1 v-show='show'>
        最是年少时模样
      </h1>
    </transition>
    <button @click='change'>切换</button>
  </div>
  <script>
    var vm=new Vue({
      el:'#root',
      data:{
        show:true
      },
      methods:{
        change:function(){
          this.show=!this.show;
        },
        handleBeforeEnter:function(el){
          el.style.opacity=0;
        },
        handleEnter:function(el,done){
         Velocity(el,{opacity:1},{duration:1000,complete:done})
        },
        handleAfterEnter:function(el){
          console.log('动画结束');
        }
      }
    })
  </script>