VUE动画

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

• 条件渲染 (使用 v-if)
• 条件展示 (使用 v-show)
• 动态组件
• 组件根节点

<style>
        .p-enter,
        .p-leave-to {
            opacity: 0;
        }

        .p-enter-to,
        .p-leave {
            opacity: 1;
        }

        .p-enter-active,
        .p-leave-active {
            transition: opacity 5s;
        }
</style>

 <div id="app">
        <button @click="show=!show">切换</button>

        <!-- p -->
        <transition name="p">
            <p v-show="show">这是一个段落</p>
        </transition>

        <!-- v- -->
        <transition>
            <h2 v-show="show">这是一个段落</h2>
        </transition>

    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                show: false
            }
        })
    </script>

过渡的类名

1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3. v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
4. v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6. v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

自定义过渡的类名

• enter-class
• enter-active-class
• enter-to-class (2.1.8+)
• leave-class
• leave-active-class
• leave-to-class (2.1.8+)

参考网址:进入/离开 & 列表过渡 — Vue.js (vuejs.org)