Implementation effect of Vue transition and animation

 Use the transition tag with CSS3 transition to achieve [incomplete code]:

Vue also provides four class class names, which are the starting point of entry (v-enter), the end point of entry (v-enter-to), the starting point of departure (v-leave), and the end point of departure (v-leave-to)

<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition appear>
            <h2 v-show="isShow">你好呀！！！</h2>
        </transition>
    </div>
</template>

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

<style scoped>
h2 {
    background-color: aqua;
    transition: 0.5s linear;
}
/* 进入的起点 */
.v-enter {
    transform: translate(-100%);
}
/* 进入的终点 */
.v-enter-to {
    transform: translate(0px);
}
/* 离开的起点 */
.v-leave {
    transform: translate(0px);
}
.v-leave-to {
    transform: translate(-100%);
}
</style>

Note : The starting point of entering and leaving is equivalent to from in CSS3 animation; the end of entering and leaving is equivalent to to in CSS3 animation.

 

 Use the transition tag with CSS3 transition to achieve [full version code]:

Generally, the starting point of entering is the same as the end point of leaving, and the end point of entering is the same as the starting point of leaving. So it can also be merged together. In addition, in order not to destroy the original style structure of the element, it is recommended to write the transition attribute in the process of animation entry and animation exit.

<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition appear>
            <h2 v-show="isShow">左右滑动</h2>
        </transition>
    </div>
</template>

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

<style scoped>
h2 {
    background-color: aqua;
}
/* 进入的起点、离开的终点 */
.v-enter, .v-leave-to {
    transform: translate(-100%);
}
/* 动画进入的过程、动画离开的过程 */
.v-enter-active, .v-leave-active {
    transition: 0.5s linear;
}
/* 进入的终点，离开的起点 */
.v-enter-to, .v-leave {
    transform: translate(0px);
}
</style>

Note : If the transition tag has no name, the above six class names all start with v-. If there is a name, the above six class names need to start with the name -.

Use the transition-group tag to animate multiple elements the same:

 The transition tag can only contain one element. If you want to include multiple elements, you need to use the transition-group tag.

<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition-group appear>
            <h2 v-show="isShow" :key="1">为true时显示</h2>
            <h2 v-show="!isShow" :key="2">为false时显示</h2>
        </transition-group>
    </div>
</template>

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

<style scoped>
h2 {
    background-color: aqua;
}
/* 进入的起点、离开的终点 */
.v-enter,
.v-leave-to {
    transform: translate(-100%);
}
/* 动画进入的过程、动画离开的过程 */
.v-enter-active,
.v-leave-active {
    transition: 0.5s linear;
}
/* 进入的终点，离开的起点 */
.v-enter-to,
.v-leave {
    transform: translate(0px);
}
</style>

Note : In the transition-group tag, each element must have a key value, otherwise an error will be reported.

 Use a third-party animation library:

It is recommended to use animate.css animation library, recommended address: https://animate.style/

 Install the animate.css library, install the command:

npm install animate.css

 

 Introduce style files in the pages that need to be used, or globally in main.js.

import "animate.css"

Adding a name to the transition tag means using this style library.

<transition name="animate__animated animate__bounce" appear>
    <h2 v-show="isShow">使用第三方动画库</h2>
</transition>

 Then select the animation effect when entering and leaving on the official website of animate.css.

 Add the animation effect when entering to the enter-active-class attribute
 Add the animation effect when leaving to the leave-active-class attribute

<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition 
            appear
            name="animate__animated animate__bounce"
            enter-active-class="animate__backInDown"
            leave-active-class="animate__backInLeft"
        >
            <h2 v-show="isShow">使用第三方动画库</h2>
        </transition>
    </div>
</template>

<script>
import "animate.css"
export default {
    name: "Home",
    data() {
        return {
            isShow: true
        }
    }
}
</script>

<style scoped>
h2 {
    background-color: aqua;
}
</style>

 Then it's ready to use!

 

Original author: Wu Xiaotang

Creation time: 2023.4.28