过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换。

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

单元素/组件的过渡

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

当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：

自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同) 自定义过渡的类名

enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class 他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用。

列表过过渡

怎么同时渲染整个列表，比如使用 v-for？在这种场景中，使用 <transition-group> 组件。在我们深入例子之前，先了解关于这个组件的几个特点：

不同于 <transition>，它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag attribute 更换为其他元素。
过渡模式不可用，因为我们不再相互切换特有的元素。
内部元素总是需要提供唯一的 key attribute 值。
CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。

下面是添加删除时动画效果：引入动画效果后，输入内容，点击添加，内容成动画效果渐入；双击要删除的选项，成动画效果移除 HTML：

<div id="app">
        <form action="#" @submit.prevent="add">
            <input type="text" v-model="value">
            <button type="submit">添加</button>
        </form>
        <transition-group tag="ul" name="list" mode="in-out">
            <li v-for="(item,index) in list" :key="index" @dblclick="del(index)">{{item}}</li>
        </transition-group>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                list: ["吃了", "睡了"],
                value: ""
            },
            methods: {
                add() {
                    this.list.push(this.value);
                },
                del(index){
                    this.list.splice(index,1);
                }
            }
        })
    </script>

css：

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

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

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

VUE动画

过渡的类名

单元素/组件的过渡

列表过过渡