vue动画transition - 码农教程

一、基本使用，

动画进入三个阶段 .v-enter → .v-enter-to → .v-enter-active

离开三个阶段 .v-leave → .v-leave-to → .v-leave-active

二、自定义属性

自定义属性名name

动画进入三个阶段 .自定义属性名-enter → .自定义属性名-enter-to → .自定义属性名-enter-active

离开三个阶段 .自定义属性名-leave → .自定义属性名-leave-to → .自定义属性名-leave-active

三、注意

每个transition只能有一个跟标签

示例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        #app {
            margin-left: 400px;
        }

        #app>div {
            margin-top: 400px;
            color: red;
        }
        .v-enter {
            opacity: 0;
            transform: translateX(-300px);
        }

        .v-leave,
        .v-enter-to {
            opacity: 1;
            transform: translateX(0px);
        }

        .v-leave-active,
        .v-enter-active {
            transition: all 1s;
        }

        .v-leave-to {
            opacity: 0;
            transform: translateX(300px);
        }



        /* 自定义 */

        .mine-enter {
            opacity: 0;
            transform: translateY(-300px);
        }

        .mine-leave,
        .mine-enter-to {
            opacity: 1;
            transform: translateY(0px);
        }

        .mine-leave-active,
        .mine-enter-active {
            transition: all 1s;
        }

        .mine-leave-to {
            opacity: 0;
            transform: translateY(300px);
        }
    </style>
</head>

<body>
    <div id='app'>
        <button @click='change'>切换</button>
        <transition>
            <div v-show='flag'>
                <h1>总有人，山高路远，为你而来</h1>
            </div>
        </transition>
        <!-- 自定义属性名 -->
        <transition name='mine'>
                <h2 v-show='flag'>总有人，山高路远，为你而来</h2>
        </transition>
    </div>


    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                flag: true,
            },
            methods: {
            },
            created() {

            },
            methods: {
                change() {
                    this.flag = !this.flag
                    console.log(this.flag);
                }
            }
        })
    </script>
</body>

</html>

原文地址：https://www.cnblogs.com/myqinyh/p/15296672.html