Use of Vue transitions and animations

The role of the transition tag: you can add animation effects to elements when inserting, updating or removing DOM elements.

The classes that the transition tag matches are:
- v-enter: The starting point of entry.
- v-enter-active: The effect when entering.
- v-enter-to: The end point of entry.
- v-leave: The starting point for leaving.
- v-leave-active: the effect when leaving 
- v-leave-to: the end point of leaving.

 Animation using CSS3:

Create the Home.vue page and set the display and hide animation effects for the elements.

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

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

<style scoped>
h2 {
    background-color: aqua;
}
/* 进入时的动画效果（显示） */
.come {
    animation: toggleShow 0.5s;
}
/* 离开时的动画效果（隐藏） */
.go {
    animation: toggleShow 0.5s reverse;
}
@keyframes toggleShow {
    from {
        transform: translate(-100%);
    }
    to {
        transform: translate(0px);
    }
}
</style>

Note : reverse in animation means to reverse the animation effect. In addition, using native CSS3, you cannot add two kinds of animations, entering and leaving, to an element at the same time. More than just adding the animation effect of entering.

 

 Use the transition tag with CSS3 animation to achieve:

 The transition tag is provided by Vue, which can add transition effects to internal elements.

<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition>
            <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-active {
    animation: toggleShow 0.5s;
}
/* 离开时的动画效果（隐藏） */
.v-leave-active {
    animation: toggleShow 0.5s reverse;
}
@keyframes toggleShow {
    from {
        transform: translate(-100%);
    }
    to {
        transform: translate(0px);
    }
}
</style>

Note : When using the transition tag to create an animation, the class name cannot be defined casually. v-enter-active means the animation effect when entering, and v-leave-active means the animation effect when leaving.

 

 Use transition tags with CSS3 animations to achieve multiple sets of animation effects:
If you need to create multiple sets of animations in one component, you can define a name for the transition tags. And the corresponding class names must also be name-enter-active and name-leave-active.

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

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

<style scoped>
h2 {
    background-color: aqua;
}
/* 进入时的动画效果（左右显示） */
.leftRight-enter-active {
    animation: leftShow 0.5s;
}
/* 离开时的动画效果（左右隐藏） */
.leftRight-leave-active {
    animation: leftShow 0.5s reverse;
}
@keyframes leftShow {
    from {
        transform: translate(-100%);
    }
    to {
        transform: translate(0px);
    }
}

/* 进入时的动画效果（上下显示） */
.topBottom-enter-active {
    animation: topShow 0.5s;
}
/* 离开时的动画效果（上下隐藏） */
.topBottom-leave-active {
    animation: topShow 0.5s reverse;
}
@keyframes topShow {
    from {
        transform: translate(0px, -100px);
    }
    to {
        transform: translate(0px, 0px);
    }
}
</style>

Note : If the name is not written, the class starts with v- by default. If you write the name, the class starts with the name -.

 

The appear attribute  in the transition tag :

The appear attribute can be added to the transition tag, which means that the animation effect of entering is performed once when the page is loaded.

<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition name="leftRight" 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;
}
/* 进入时的动画效果（左右显示） */
.leftRight-enter-active {
    animation: leftShow 0.5s;
}
/* 离开时的动画效果（左右隐藏） */
.leftRight-leave-active {
    animation: leftShow 0.5s reverse;
}
@keyframes leftShow {
    from {
        transform: translate(-100%);
    }
    to {
        transform: translate(0px);
    }
}
</style>

Note : You can write the appear attribute on the label alone. But you can't write appear="true" directly.

 

Original author: Wu Xiaotang

Creation time: 2023.4.25