1、vue应用css3.0中的animation实现动画，在两个关键的时间段enter-active和leave-active添加动画元素即可

animation：第一个值是动画规则的名称[animation-name]，可以自定义名称，它是@keyframes的定义的名称，@keyframes是定义一个动画实现过程的规则，动画从开始到结束这个过程中都可以定义不同的变化样式。

animation：第二个值是动画执行需要的时间[animation-duration]

animation：第三个值reverse是动画按反向执行，是[animation-direction]属性中的一个值，其它值检索CSS3.0教程查看

2、vue通过自定义过渡类名实现第三方动画库【animate.css】的引入应用，在transition标签中有两个可自定义类名的属性，进入时间段类名enter-active-class和离开时间段类名leave-active-class，引用第三方库后只要按示例中分别给enter-active-class和leave-active-class属性赋值animate.css中的动画样式类名即可。

3、vue动画中:duration属性是指动画开始前需要延时一段时间后才开始执行，这段延迟时间多久由:duration的值决定，单位是毫秒，:duration="1000"表示进入和离开都有1秒的延迟后才会开始动画，如果要设置进入和离开延时的时间长度不同可以用:duration="{enter:500,leave:1000}"赋值对象的方式实现，这段设置表示进入动画需要延迟0.5秒，离开动画开始前需要延时1秒。

<html>
<hred>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0">
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.css">
    <style>
        .myAnimate-enter-active {
            animation: myanimate .5s;
        }

        .myAnimate-leave-active {
            animation: myanimate .5s reverse;
        }

        @keyframes myanimate {
            0% {
                transform: scale(0)
            }

            50% {
                transform: scale(1.5)
            }

            100% {
                transform: scale(1)
            }
        }
    </style>
</hred>
<div id="app">
    <div :style="{width:'200px'}">
        <input type="button" @click='flag=!flag' value="进入/离开">
        <transition name="myAnimate">
            <p v-show="flag">我的动画很炫酷</p>
        </transition>
        <transition enter-active-class="animate__bounceIn" leave-active-class="animate__bounceOut" :duration="1000">
            <div v-if="flag">我自带BGM</div>
        </transition>
        <transition enter-active-class="animate__animated animate__zoomInUp"
            leave-active-class="animate__animated animate__zoomOutDown" :duration="{ enter: 500, leave: 800 }">
            <h3 v-if="flag">我比楼上哥们帅</h3>
        </transition>
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            flag: false
        },
        methods: {}
    })
</script>

</html>