Vue 封装的过度与动画

作用：在插入、更新、移除 DOM 元素时，在合适的时候给元素添加样式类名

---

写法

首先准备好样式

元素进入的样式

• v-enter：进入的起点
• v-enter-active：进入过程中
• v-enter-to：进入的终点

元素离开的样式

• v-leave：离开的起点
• v-leave-active：离开过程中
• v-leave-to：离开的终点

使用 transition 包裹要过度的元素，并配置其 name 属性

<transition name="hello">
	<h2 v-show="isShow" class="come">你好</h2>
</transition>

如果有多个元素需要过度，则需要使用 transition-group 进行包裹

---

实例

App.vue

<template>
    <div>
        <MyTest/>
    </div>
</template>

<script>

    import MyTest from "@/components/MyTest";

    export default {
        name: 'App',
        components: {MyTest}
    }
</script>

<style>

</style>

MyTest.vue

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

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

<style scoped>
    h2 {
        background-color: #a6d49d;
    }

    /*进入的起点和离开的终点*/
    .hello-enter, .hello-leave-to {
        transform: translateX(-100%);
    }

    .hello-enter-active, .hello-leave-active {
        transition: 0.5s linear;
    }

    /*进入的终点和离开的起点*/
    .hello-enter-to, .hello-leave {
        transform: translateX(0);
    }
    
    /*.hello-enter-active {*/
    /*    animation: hello 1s;*/
    /*}*/

    /*.hello-leave-active {*/
    /*    animation: hello 1s reverse;*/
    /*}*/

    /*@keyframes hello {*/
    /*    from {*/
    /*        transform: translateX(-100%);*/
    /*    }*/
    /*    to {*/
    /*        transform: translateX(0);*/
    /*    }*/
    /*}*/
</style>

---