定义过渡的状态：

v-enter：定义进入过渡的开始状态。

v-enter-active：定义进入过渡生效时的状态。

v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。

v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：

在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库，如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库，如 Velocity.js

单元素/组件的过渡

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

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

例：

<body>
<div id="app">
    <input type="button" value="切换1" @click="flag=!flag">
    <transition>
        <h3 v-if="flag">这是一个标签</h3>
    </transition>
    <hr>
    <input type="button" value="切换2" @click="flag2 =! flag2">
    <transition name="my">
        <h3 v-if="flag2">这是一个标签</h3>
    </transition>
</div>
    <script src="./js/vue.js"></script>
     <script>
        var vm = new Vue({
            el:"#app",
            data: {
            flag:false,
                flag2:false
            },
            methods:{
            }
        })
    </script>
</body>

样式

<style>
        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateX(150px);
        }
        .v-enter-active,
        .v-leave-avtive{
            transition: all 0.8s ease;
        }
        .my-enter,
        .my-leave-to{
            opacity: 0;
            transform: translateY(150px);
        }
        .my-enter-active,
        .my-leave-avtive{
            transition: all 0.8s ease;
        }
    </style>

点击切换：

当再次点击：

VUEclass 切换

定义过渡的状态：

单元素/组件的过渡