09.Vue【过渡效果】
<link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
1.过渡效果
<body>
<div id="app">
<button @click = "flag = !flag"> 点击 </button> //3.设置事件处理程序绑定开关，
//4.↓用vue内置组件transition包裹对象,使用4大类名，8个选项操作对象
<transition name = "slide-fade"
enter-active-class = "animated bounceIn"
//4.引入第三方animate.css库，在官网查找对应的效果，添加类名即可
leave-active-class = "animated bounceOut"
>
<p v-if = "flag"> 动画元素 </p> //1.创建动画过渡对象
</transition>
</div>
</body>
<script>
new Vue({
el: '#app',
data: { //2.创建开关
flag: true
}
})
</script>
