Summary of vue2 transition effect

I recently sorted out some of the transition effects of vue2. To sum up here.
Vue encapsulates the transition component for us and can add enter and leave to any element
Conditional rendering: V-if
Condition Show: V-show
Dynamic components
Component root node One, single element transition generally need to transition elements to be placed in the <transition> <transition> component, the transition has four states
① the state of the first frame when the Enter element enters.
②. Enter-active the state of the process from entering the first frame to completing the transition
③. Leave the first frame state when the element is left
④. leave-active elements leave the first frame to the state of the process of completing the transition
Columns such as:
2. CSS Transitions

Html

<div id= "mydiv" >
  <button @click = "show =!show" > Click to view Changes </button>
  <transition name= "Fade" >      //fade name is replaceable
    <div v-if= "show" >
        please see my change
    </div>
  </transition>

</div>

Css

. fade-enter-active,.fade-leave-active {
    transition:all 1s linear;
}
. fade-enter,.fade-leave-active {
   opacity:0;
   Transform:translatex (50px);
}

Javascript

New Vue ({
    el: #myDiv,
    data:{
        show:true
    }
})

3. We can also set CSS animation
Just change the CSS code to

. fade-enter-active{
     Animation:ado 5s ease-in;
 @keyframes ado{
       0%{transform:scale (0.5,0.5);}
       60%{transform:scale (1,1);}
       80%{transform:scale (1.5,1.5);}
       100%{transform:scale (1,1);}
 . fade-leave-active{
     animation:bdo 5s ease-in;
 }
 @keyframes bdo{
       0%{transform:scale (1,1);}
       60%{transform:scale (1.5,1.5);}
       80%{transform:scale (1,1);}
       100%{transform:scale (0.5,0.5);}

 

4. Custom transition Class
Custom transition classes Do not need the name attribute in. Class names can be started at their own discretion, and can also be introduced into a Third-party animation library animate.css, but need to add some attributes to the class name
Enter-class= class Name
Enter-active-class= class name (commonly used)
Leave-class= class Name
Leave-active-class= class name (commonly used)

When introducing a Third-party animation library animate.css The above properties add the animated class first, and then add the animated class name, for example:
enter-class= "Animated hinge"

Css

. achange{
   Animation:ado 5s ease-in;
 @keyframes ado{
       0%{transform:scale (0.5,0.5);}
       60%{transform:scale (1,1);}
       80%{transform:scale (1.5,1.5);}
       100%{transform:scale (1,1);}
 

Html

<div id= "mydiv" >
   <button @click = "show =!show" > Click on Me </button>
     <!--here to add animated will be effective ( The first is my own class name, not add, but the introduction of animate.css need to be preceded by animate)-->
 <transition
    leave-active-class= "Achange"  
    enter-active-class= "Animated hinge"
  >
     <p v-if= "show" > See my Changes </p>
 </ Transition>      

</div>

Javascript

New Vue ({
    el: #myDiv,
    data:{
        show:true
    }
})

5.JavaScript transition Hook
①before-enter
②enter
③after-enter
④enter-cancelled (applied in v-show)
⑤before-leave
⑥leave
⑦after-leave
⑧leave-cancelled (applied in v-show)

When using JavaScript only for transitions, the callback function is required in enter and leave.
Otherwise, they are called synchronously, and the transition is completed immediately.

For example

Leave:function (el, done) {
    //...
    Done ()
  },
  afterleave:function (EL) {
    //...
  },

Second, multi-element transition

1. Implement multiple Element transition
①v-if and V-else or v-else-if (two adjacent elements are not required)

CSS omitted

<!--different elements can be v-if and v-else between the transition, and the same element is not-->
  <button @click = "show =!show" > Click to view Changes </button>
  <transition name= "Fade" >      
    <div v-if= "show" >
        please see my change div
    </div>
    <p v-else = "Fade" > I will also change pppp</p>
  </transition>

</div>

<script>
    new Vue ({
        el: "#myDivB",
        data:{
            show:true
        }
    )
</script>

② using attribute key (recommended)

<!--adjacent elements are unrestricted and can be--> for the same element
  <button @click = "show =!show" > Click to view Changes </button>
  <transition Name= "Fade" >      
    <div key= "Show" >
        {show? First:last}}
    </div>
  </transition>

</div>

<script>
    new Vue ({
        el: #myDivB,
        data:{
            show:true
        }
    })
</script>

③v-if and key properties mixed with

 <div id= "MYDIVC" > <!--v-if, v-show, and key toggle more elements--> <button @click = "Showa" > Click to view Changes </b utton> <transition name= "Fade" > <div v-if= "show = = ' One '" key= "one" > Oneone Oneone </div> <div v-if= "show = = ' two '" key= "two" > Twotwotwotwo </div>
        ; <div v-if= "show = = ' Three '" key= "three" > Threethreethree </div> </transition> & lt;/div> <script> New Vue ({el: "#myDivC", data:{Show: ' One '}, M ethods:{showa:function () {if (this.show = ' one ') {return this.show =
                  ' Two ';
                  }else if (this.show = = ' two ') {return this.show = ' three ';
                  }else{return this.show = ' one '; </script> 
}}});

2. Transition mode
When multiple elements are transitioning, these elements start at the same time, Vue provides two properties, adds the mode attribute in, and it has two values

In-out: The new element is preceded by a transition, and the current element transitions away after completion.
Out-in: The current element is preceded by a transition, and the new element transitions into it after completion. Three, multi-component transition

1. Multi-component transitions, using the IS attribute

Css

. fade-enter-active,.fade-leave-active {
 transition:all 1s linear;
}
. fade-enter,.fade-leave-active {
  opacity:0;
  Transform:translatex (50px);
}

Html

<div id= "mydiv" >
  <button @click = "Show" > Click to view Change </button>
  <transition name= "fade" mode = " Out-in ">      
      <component:is=" View ></component>    
      <!--component replacement with is attribute-->
  </transition >
</div>

Javascript

New Vue ({
    el: "#myDiv",
    data:{
        view: "A-view",
    },
    components: {
        "A-view": {
            Template: " <div> I am the first template </div> "
         },
         " B-view ": {
            Template:" <div> I am the second template </div> "
         }
    },
    methods:{
      show:function () {
         This.view = This.view = = "A-view"? B-view ":" A-view ";}}
)

Iv. list Transitions

The transition to a list requires the use of v-for and <transition-group> </transition-group> components
Attention:
① list <transition-group> </transition-group> on page rendering is a span label if you want to change it with the tag attribute. For example <transition-group tag= "div" > </transition-group> render it is div
The ② list adds a unique key property value to each list item when it is looping. So the list will have a transition effect

Directly on the code description:
Css
Introduction of ANIMATE.CSS

span{
    Display:inline-block;
    padding:10px
}
. Position{position:absolute}//This is when the list is left to add the class, if not to position, the list of elements left after the Occupy, there will be no transition.
. List-complete-item{transition:all 3s linear;}
Transition to a list

Html

<div id= "mydiv" >
  <button @click = "Add" > Randomly add number </button>
  <button @click = "Remvoed" > Random Delete number </button>
    <button @click = "Suffle" > Random sort </button>
  <transition-group tag= "Div" 
     name= "flip-list"
     enter-active-class= "animated bounceinup position" leave-active-class= "animated
     Bounceoutdown position "
  >     
     <span v-for=" item in list: key= "item" class= "List-complete-item" >{{item} }</span>
  </transition-group>

</div>

Javascript
Introducing Lodash.min.js to realize random ordering

New Vue ({
el: "#myDiv",
    data:{//Here Write code
        list:[1,2,3,4,5],
        addnumber:5
    },
    methods:{
        Randomindex:function () {///randomly inserted position return
            Math.floor (Math.random () *this.list.length);
        },
        add:function () {
            this.list.splice (This.randomindex (), 0,++this.addnumber)
        },
        remvoed:function () {
                  This.list.splice (This.randomindex (), 1);
        },
              suffle:function () {
                  this.list = _.shuffle (this.list)
        }
    }
})

V. Transitions from other transition initial rendering
Adding apper to the transition template <transition> will render and transition the page at load time
Apper the same as entering the exit transition
① Custom class Name:
Apper-class
Apper-active-class
② Custom JS Hooks
V-on:before-appear
V-on:appear
V-on:after-appear