Animation and transition effects

Animation effect

Vue Provides transition Package components of , In the following cases , You can add... To any element or component Get into / Leave the transition ：

• Conditions apply colours to a drawing ( Use v-if)
• Condition display ( Use v-show)
• Dynamic components
• Component root

That is to say, use this transition label , We don't need to use data binding , Change the class to trigger the animation when entering and leaving .

This transition Label final Vue When parsing templates , Take them away

For example, now let's make a case ：

Click to display , Click Hide again . There is animation moving in and out in the middle .

First of all, let's take transition Tags wrap the elements to be animated ：

<template>
    <div>
        <button @click="isShow = !isShow"> Show / hide </button>
        <transition>
            <h1 v-show="isShow"> How do you do ！</h1>
        </transition>
    </div>
</template>

<script> export default {
       name:'AnimationTest', data() {
       return {
       isShow:true } }, } </script>

So let's use v-enter-active and v-leave-active To define the style to be activated when entering and the style to be activated when leaving .

<style scoped> h1{
       background-color: orange; } .v-enter-active{
       animation: move 0.5s linear; } .v-leave-active{
       animation: move 0.5s linear reverse; } @keyframes move {
       from{
       transform: translateX(-100%); } to{
       transform: translateX(0px); } } </style>

Let's focus on v-enter-active and v-leave-active Time to act ：

v-enter-active： Define the state when the transition takes effect . Apply... Throughout the transition , Takes effect before the element is inserted , In the transition / Remove... After animation . This class can be used to define the process time to enter the transition , Delay and curve functions .

When we click on the display , Play the animation before displaying

isShow Change immediately

v-leave-active： Define the state when the exit transition takes effect . Apply... Throughout the transition , Takes effect immediately when the exit transition is triggered , In the transition / Remove... After animation . This class can be used to define the process time of leaving the transition , Delay and curve functions .

When we click Hide , The animation is immediately triggered

isShow Change immediately

There is another point of attention ：
For these class names that switch in transition , If you use an unnamed <transition>, be v- Is the default prefix for these class names . If you use a name , Then use the corresponding name to replace v-

For example, the case above , I give <transition> Naming – hello

So here's the code ：

<template>
    <div>
        <button @click="isShow = !isShow"> Show / hide </button>
        <transition name="hello">
            <h1 v-show="isShow"> How do you do ！</h1>
        </transition>
    </div>
</template>

<script> export default {
       name:'AnimationTest', data() {
       return {
       isShow:true } }, } </script>

<style scoped> h1{
       background-color: orange; } .hello-enter-active{
       animation: move 0.5s linear; } .hello-leave-active{
       animation: move 0.5s linear reverse; } @keyframes move {
       from{
       transform: translateX(-100%); } to{
       transform: translateX(0px); } } </style>

If we want to open a web page, there will be animation when displaying elements , What to do ？

We can use transition Labeled appear attribute , This is a Boolean property

According to the above case We can write in the following ways ：

<transition name="hello" :appear="true">
       <h1 v-show="isShow"> How do you do ！</h1>
</transition>

<transition name="hello" appear>
       <h1 v-show="isShow"> How do you do ！</h1>
</transition>

In fact, it can be popularized , You want to give the tag an attribute , Just write the attribute name directly , Don't bother to set its value to true.
If you don't want it to have this property , You need to explicitly declare false

Transition effects

We completed the above case with animation , So how do we complete the transition ？

Here we will introduce two new opportunities ：v-enter、v-enter-to

v-enter： Define the start state of transition . Takes effect before the element is inserted , Remove the next frame after the element is inserted .

v-enter-to：2.1.8 Version and above Define the end state of transition . The next frame takes effect after the element is inserted ( meanwhile v-enter Removed ), In the transition / Remove... After animation .

We can simply understand it as ：

• v-enter Is the starting point of entry
• v-enter-to Is the end of entry

Combined with our above case ：

The orange part is the starting point , The green part is the end of entry ！

The same goes for leaving , Finally, our code is as follows ：

<template>
    <div>
        <button @click="isShow = !isShow"> Show / hide </button>
        <transition name="hello" appear>
            <h1 v-show="isShow"> How do you do ！</h1>
        </transition>
    </div>
</template>

<script> export default {
       name:'AnimationTest', data() {
       return {
       isShow:true } }, } </script>

<style scoped> h1{
       background-color: orange; transition: 2s linear; } .hello-enter {
       transform: translateX(-100%); } .hello-enter-to {
       transform: translateX(0); } .hello-leave {
       transform: translateX(0); } .hello-leave-to {
       transform: translateX(-100%); } </style>

Because the starting point of entering is the same as the ending point of leaving , The end of entry is the same as the starting point of departure , So we can merge . At the same time, in order not to destroy the original style , We can put the transition time and curve on v-enter-active and v-leave-active in

So we can optimize the code ：

<style scoped> h1{
       background-color: orange; } /*  The starting point of entry 、 The end of leaving  */ .hello-enter,.hello-leave-to{
       transform: translateX(-100%); } .hello-enter-active,.hello-leave-active{
       transition: 0.5s linear; } /*  Enter the end of 、 The starting point of departure  */ .hello-enter-to,.hello-leave{
       transform: translateX(0); } </style>

Multiple element transitions

If you want to add the same style to multiple elements , You can't use it transiton The label , It needs to be used transition-group label .

When elements with the same tag name switch , Need to pass through key attribute Set a unique value to mark so that Vue Distinguish them , otherwise Vue For efficiency, only the contents inside the same label will be replaced .

for example ：

<template>
    <div>
        <button @click="isShow = !isShow"> Show / hide </button>
        <transition-group name="hello" appear>
            <h1 v-show="isShow" key="1"> How do you do ！</h1>
            <h1 v-show="isShow" key="2">CSDN</h1>
        </transition-group>
    </div>
</template>

Integrate third-party animation

stay Vue It can easily integrate third-party style libraries or animation libraries , To help us quickly achieve some particularly cool effects .

We are here to npm Upper animate.css For example

https://www.npmjs.com/package/animate.css

This library provides a lot of entry and exit effects .

Use steps ：

First install this library in the terminal ：

npm install animate.css --save

Introduce this library ：

import 'animate.css'

Because we introduced css The library of , No js modular , So let's just follow the path

then animate__animated ,animate__bounce Put it into what you want to use transition Labeled name Attribute to .

stay transition Add two new configuration items to the tag enter-active-class,leave-active-class. Put the selected name into the animation , And leave the name of the animation inside .

This name can be copied directly by clicking the icon behind

<template>
    <div>
        <button @click="isShow = !isShow"> Show / hide </button>
        <transition-group name="animate__animated animate__bounce" appear enter-active-class="animate__swing" leave-active-class="animate__backOutUp" >
            <h1 v-show="isShow" key="1"> How do you do ！</h1>
            <h1 v-show="isShow" key="2">CSDN</h1>
        </transition-group>
    </div>
</template>

And then ok 了 ：

summary

Vue Encapsulated transition and animation

1. effect ： In the insert 、 Update or remove DOM Element time , Add style class names to elements when appropriate .

2. Icon ：

3. How to write it ：

   1. Prepare the style ：

      • Element entry style ：
        1. v-enter： The starting point of entry
        2. v-enter-active： In the process
        3. v-enter-to： Enter the end of
      • The style that the element leaves ：
        1. v-leave： The starting point of departure
        2. v-leave-active： In the process of leaving
        3. v-leave-to： The end of leaving

   2. Use <transition> Wrap over elements , And configuration name attribute ：

      <transition name="hello">
      	<h1 v-show="isShow"> How do you do ！</h1>
      </transition>
      

   3. remarks ： If there are multiple elements that need to be overused , You need to use ：<transition-group>, And each element must specify key value .

   4. If it's animation , You only need to use v-enter-active、v-leave-active. In case of transition , Can be used to .