借用animate.css添加类名
使用transition包裹过渡组件
动画：
enter-active-class = "animated xxxx类名" ---- 进入
leave-active-class = "animated xxxx类名" ---- 离开
mode：
- 新元素先进行过渡，完成后当前元素过渡离开 --- in-out
- 当前元素先进行过渡，完成之后新元素过渡进入 --- out-in
<link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">
<style>
p{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="app">
<button @click = "changeFlag"> changeFlag </button>
<!-- mode 有两个值 in-out out-in -->
<transition
name = "xige"
mode = "in-out"
enter-active-class = "animated fadeIn"
leave-active-class = "animated fadeOut"
>
<p v-if = "flag"></p>
</transition>
</div>
</body>
<script src="../../../lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
flag: true
},
methods: {
changeFlag () {
this.flag = !this.flag
}
}
})
</script>
