Vue study notes [20] - Vue animation (animation hook function)

Define and use the hook function

1. And a transition assembly defines three hook function:

 <div id="app">
     <input type="button" value="切换动画" @click="isshow = !isshow">
     <transition
     @before-enter="beforeEnter"
     @enter="enter"
    @after-enter="afterEnter">
      <div v-if="isshow" class="show">OK</div>
    </transition>
  </div>

2. Method hook defines three methods:

 Methods: { 
         beforeEnter (EL) {// animation callback before entering 
           el.style.transform = 'the translateX (500px)'; 
        }, 
        Enter (EL, DONE) {// complete animation enter callback time 
          el.offsetWidth; 
          EL = .style.transform 'the translateX (0px)'; 
          DONE (); 
        }, 
        afterEnter (EL) {// animation enter callback after completion 
          this.isshow = this.isshow;! 
        } 
      }

3. Length and style defined the transition animation:

 .show{
       transition: all 0.4s ease;
     }