Vue动画

1、使用过渡类名
需求：点击按钮，让 h3 显示，再点击，让 h3 隐藏
第一步：使用 transition 元素，把 需要被动画控制的元素，包裹起来

    <transition>
            <h3 v-if="flag">这是一个h3</h3>
    </transition>

第二步：自定义两组样式，来控制 transition 内部的元素实现动画

<style>
    /* v-enter  【这是一个时间点】 是进入元素之前，元素的起始状态，此时还没有开始进入 */
    /* v-leave-to  【】  是动画离开之后，离开的终止状态， 此时，元素 动画已经结束了*/

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

    /* v-enter-active【入场动画的时间段】 v-leave-active【出场动画的时间段】 */
    .v-enter-active,
    .v-leave-active{
        transition: all 0.8s ease;
    }

第三步：实现按钮点击事件，控制动画的出现与隐藏

<input type="button" value="toggle" @click="flag = ! flag">

2、修改v-前缀

<