Preface

Remember to use transition and transition group to set transition animation in vue component once. In summary, it can be divided into name version, js hook operation class name version, js hook operation inline style version.

Template template structure

  // Single element
    <transition name="Custom name">
      <p v-if="show">hello</p>
    </transition>
  // List elements: note that the direct child elements of the group are rendered by v-for
    <ul class="list">
      <transition-group name="list">
        <li v-for="(item, index) in gameList" :key="item.id">
          <app-horizontal :itemData="item"></app-horizontal>
        </li>
      </transition-group>
    </ul>

name is the attribute in the component.

Occurrence process: name enter (initial state) = > name enter active (intermediate state) = > name enter to (termination state)
The process of disappearing: name leave = > name leave active = > name leave to

Take the animation of approach transition as an example

We can set them separately enter Stage and enter-to Animation of stages
  1.Set the properties that need transition when entering
  .name-enter
  {
    opacity: 0;
    transform: translateY(30px)
  }
  2.Then in name-enter-active Set transition time in
  .name-enter-active {
    transition: all .3s;
  }
  3.Last in name-enter-to Write termination attribute in
    //In fact, the opacity: 1;transform: none; in the termination state is the default and can be left blank.
  .name-enter-to {
    opacity: 1;
    transform: translateY(0);
  }
  //If you want to set the staggered effect for the elements in the list, you can add the delay attribute if there are not many elements.
  .name-enter-active:nth-child(3n+1) {
    transition-delay: 0s;
  }
  .name-enter-active:nth-child(3n+2) {
    transition-delay: .1s;
  }
  .name-enter-active:nth-child(3n+3) {
    transition-delay: .2s;
  }
  //The same with the departure animation...

js hook to achieve transition Animation: through the operation class name; that is, the name version of js implementation

// For example, the above list can be displayed in turn.
  <ul class="list">
    <transition-group
      v-bind:css="false"
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:after-enter="afterEnter">
      <li v-for="(item, index) in gameList" 
        :key="item.id" 
        :data-delay="index*100" 
      >
          <app-horizontal :itemData="item"></app-horizontal>
      </li>
    </transition-group>
  </ul>  
  // 
  methods: {
    // Define the above class name in advance
    // Manually operate the above class name in the beforeEnter enter afterEnter hook
    
    // Initial state
    beforeEnter(dom) {
      dom.classList.add('list-enter', 'list-enter-active');
    },
    // Intermediate state
    enter(dom,done) {
      // Transition through setTimeout + dataset
      let delay = dom.dataset.delay;
      setTimeout(function () {
        dom.classList.remove('list-enter');
        dom.classList.add('list-enter-to');
        //Listen to the transionend event
        var transitionend = window.ontransitionend ? "transitionend" : "webkitTransitionEnd";
        dom.addEventListener(transitionend, function onEnd() {
          // Remove events
          dom.removeEventListener(transitionend, onEnd);
          //Call done() to indicate that the animation is complete
          done()
        });
      }, delay)
    },
    // Termination state
    afterEnter(dom) {
      dom.classList.remove('list-enter-to', 'list-enter-active');
    }
  }

js hook transition Animation: customize the animation by manipulating in line attributes

   <ul class="list">
    <transition-group
      v-bind:css="false"
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:after-enter="afterEnter">
      <li v-for="(item, index) in gameList" 
        :key="item.id" 
        :data-delay="index*100"
        data-y = "100%" 
      >
          <app-horizontal :itemData="item"></app-horizontal>
      </li>
    </transition-group>
  </ul>  
  // Corresponding operation method; add custom dataset, set css style for dom; add as required
   methods: {
     // Initial state
    beforeEnter(dom) {
      let { x = 0, y = 0, opacity = 0 } = dom.dataset;
      dom.style.cssText = `transition: .3s;opacity: ${opacity};transform: translateX(${x}) translateY(${y});`;
    },
    // Intermediate state
    enter(dom,done) {
      let delay = dom.dataset.delay;
      setTimeout(function () {
        dom.style.cssText = `transition: .3s;opacity: 1;transform: translateX(0) translateY(0);`;
        //Listen to the transionend event
        var transitionend = window.ontransitionend ? "transitionend" : "webkitTransitionEnd";
        dom.addEventListener(transitionend, function onEnd() {
             dom.removeEventListener(transitionend, onEnd);
             done(); 
        });
      }, delay)
    },
    // Termination state
    afterEnter(dom) {
      dom.style.cssText = "";
    }
  }

Here, record the animation and transition events listening to css3:

WebKit animation has three events:
    Start event: webkitAnimationStart
    End event: webkitAnimationEnd
    Repeated motion event: webkitAnimationIteration

Transition attribute transition of css3: an event
    Transition end: webkitTransitionEnd