VUE动画

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

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

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

自定义组件：

  <div id="app">
        <button @click="show=!show">切换</button>
        <transition-group tag="ul" 
    enter-active-class="animated bounceInUp" 
    leave-active-class="animated bounceOutDown"
    >
            <div v-show="show" v-for="i in 5" :key="i">列表---{{i}}</div>
        </transition-group>
    </div>

引入css动画插件：

 <link rel="stylesheet" href="./css/animate.min.css">
    <script src="./js/vue.js"></script>

效果：

点击切换： 内容向下弹跳运动