<transition name="fade">
       <div v-if="show">hello world</div>
 </transition>
Copy the code

When an element is wrapped in Transition, Vue automatically analyzes the element’s CSS style and builds the flow of the animation.


Display:

The moment the animation is about to be executed, two classes are automatically added to the internal div, fade- Enter and fade- Enter – Active. When the transition tag completes the first frame of the animation, Vue knows that it is an animation effect. When the animation runs to the second frame, vue will remove the previous fade- Enter and add fade- Enter -to. The animation continues until the moment it ends, when Vue removes the fade-enter-active and fade- Enter -to classes.


Hidden:

Vue will automatically build the hidden animation process. At the first moment of hiding, Vue will automatically generate two classes, namely fade-leave and fade-leave-Active. In the second frame, remove fade-leave and add fade-leave-to. For the last frame, remove the fade-leave-active and fade-leave-to.

All prefixes start with fade- because name= “fade”. If there is no fade, the default prefix is “V -“.


@keyframes bounce-in { 0% { transfrom: scale(0); } 50% {transfrom: scale(1.5); } 100% { transfrom: scale(1); } } .fade-enter-active { transform-origin: left center; animation: bounce-in 1s; } .fade-leave-active { transform-origin: left center; animation: bounce-in 1s reverse; }Copy the code


Used in VueThe Animate. CSS library

1. You must use custom class form naming to use Animate. CSS

2. The class must include the specific class, and then put the class name in the second place depending on whether either animated or animated is animated.

<transition 
        name="fade"
        enter-active-class="animated swing"
        leave-active-class="animated shake"
        >
       <div v-if="show">hello world</div>
 </transition>
Copy the code


 <transition 
        name="fade"
        appear
        enter-active-class="animated swing"
        leave-active-class="animated shake"
        appear-active-class="animated swing"
        >
       <div v-if="show">hello world</div>
  </transition>
Copy the code

When you customize the class of your animation with “appear-active-class”, remember to add a “Appear” attribute to the class name. The above example means that animated Swing also has animated Swing effects the first time the animation is shown.


Use both transitions and animations in VUE

In fact, the animating principle provided by Animate. CSS is @keyframes, a CSS3 animation effect.

The transition

.fade-enter {
       opacity: 0;
    }
    .fade-enter-active {
       transition: opacity 3s;
    }
    .fade-leave-to {
       opacity: 0;
    }
    .fade-leave-active {
       transition: opacity 3s;
    }
Copy the code

<transition 
        name="fade"
        appear
        enter-active-class="animated swing fade-enter-active"
        leave-active-class="animated shake fade-leave-active"
        appear-active-class="animated swing"
        >
       <div v-if="show">hello world</div>
    </transition>
Copy the code

We define the fade-enter-active and fade-leave-active transitions as 3s, but the animated frames in Animate. CSS are 1s. Set type

 <transition 
        name="fade"
        type="transition"
        appear
        enter-active-class="animated swing fade-enter-active"
        leave-active-class="animated shake fade-leave-active"
        appear-active-class="animated swing"
        >
       <div v-if="show">hello world</div>
 </transition>
Copy the code

There is both a KeyFrame animation and a Transition animation, and the duration of the animation is determined by the animation type set in type.

You can also customize the animation playback duration

:duration="10000"
Copy the code

:duration="{enter: 5000,leave:10000}"
Copy the code


Js animation in Vue combined with velocity.js

A. Animate display hooks

@before-enter = “handleBeforeEnter”

handleBeforeEnter: function(el) {//el: Transition wrapped div tag el.style.color ="red";
       },
Copy the code

@enter = “handleEnter”

 handleEnter: function(el,done{/ /doneThe callback function is called manually after the animation is finisheddoneThe callback functionsetTimeout(()=>{
          el.style.color = "green";
        }, 2000);
        setTimeout(()=>{
           done(a); }, 4000); },Copy the code

@after-enter = “handleAfterEnter”

handleAfterEnter: function(el) {
        el.style.color = "black"; }},Copy the code

B. Animation vanishing hook

@before-leave

@leave 

@after-leave

c.Velocity.js

       handleBeforeEnter: function(el) {
        el.style.opacity = 0;
       },
       handleEnter: function(el,done){
        Velocity(el, 
                 {opacity: 1}, 
                 {duration:1000,
                  complete:done});
       },
       handleAfterEnter: function(el) {
         alert("End of animation");
       },
Copy the code


Transitions of multiple elements or components in a Vue

A. Transition of multiple elements:

Vue tries to reuse the DOM as much as possible during animation (when switching between two elements), giving each element a different key to eliminate reuse mechanisms.

Vue also provides a mode configuration parameter in Transition to set the effect of switching between multiple elements.

 <transition name="fade" mode="in-out">
      <div v-if="show" key="hello">hello world</div>
      <div v-else key="bye">bye world</div>
 </transition>
Copy the code

.fade-enter {
       opacity: 0;
     }
     .fade-enter-active {
       transition: opacity 1s;
     }
     .fade-leave-to {
        opacity: 0;
     }
     .fade-leave-active {
        transition: opacity 1s;
     }
Copy the code

B. transition effect of multiple components :(dynamic components)

<body>
  <div id="app">
    <transition name="fade" mode="out-in">
       <component :is="type"></component>
    </transition>
    <button @click="handleClick"</button> </div> <script> Vue.component('child',{
      template: '<div>child</div>'
   });
   Vue.component('child-one',{
      template: '<div>child-one</div>'
   });
  
   var vm = new Vue({
     el: "#app", 
     data: {
      type: 'child'
     },
     methods: {
      handleClick: function() {
        this.type = (this.type==='child')?'child-one' : 'child'; }}}); </script> </body>Copy the code


Transition-group list in Vue

<style type="text/css">
    .v-enter,.v-leave-to {
       opacity: 0;
    }
    .v-enter-active,.v-leave-active {
      transition: opacity 1s;
    }
</style>

  <div id="app">
    <transition-group>
      <div v-for="(item,index) of list" key="item.id">
        {{item.title}}----{{item.id}}
      </div>
    </transition-group>
    <button @click="handleClick">Add</button>
  </div>

  <script>
   var count = 0;
   var vm = new Vue({
     el: "#app", 
     data: {
      list: []
     },
     methods: {
      handleClick: function() {
        this.list.push({
         id: count++ ,
         title: 'hello wrold'}); }}}); </script>Copy the code



Animation encapsulation in Vue

<body>
  <div id="app">
    <fade :show="show">
      <div>hello world</div>
    </fade>

    <fade :show="show">
      <h1>bye world</h1>
    </fade>
    <button @click="handleClick"</button> </div> <script> Vue.component('fade',{
      props:['show'],
      template: `
      <transition 
        @before-enter="handleBeforeEnter"
        @enter="handleEnter"
        @after-enter="handleAfterEnter">
        <slot v-if="show"></slot>
      </transition>
      `,
      methods: {
        handleBeforeEnter: function(el) {
        el.style.color = 'red';
      },
      handleEnter: function(el,done) {
        setTimeout(()=>{
          el.style.color = 'blue';
        }, 2000);
        setTimeout(()=>{
          done(a); }, 5000); }, handleAfterEnter:function(el) {
        el.style.color = 'black'; }}}); var vm = new Vue({ el:"#app", 
     data: {
      show:true
     },
     methods: {
      handleClick: function() { this.show = ! this.show; }}}); </script> </body>Copy the code