<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<script src="../lib/js/vue.js"></script>
<link rel="stylesheet" href="../lib/css/animate.min.css">
<!-- 入场：bounceIn 离场：bounceOut
给设置动画的元素加类 class="animated"-->
</head>
<body>
<div id="app">
<h1>第三方库实现动画</h1>
<input type="button" value="button" @click="change">
<!-- <transition enter-active-class="bounceIn" leave-active-class="bounceOut">-->
<!-- <h3 v-if="flag" class="animated">这是一只猫</h3>-->
<!-- </transition>-->
<!-- 使用 :duration='毫秒值' 来统一设置入场 和 离场 时候的动画时长-->
<!-- <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="200">-->
<!-- <h3 v-if="flag" class="animated">这是一只猫</h3>-->
<!-- </transition>-->
<!-- 也可以分开设置时长 -->
<transition enter-active-class="bounceIn"
leave-active-class="bounceOut"
:duration="{ enter:400,leave:1000 }">
<h3 v-if="flag" class="animated">这是一只猫</h3>
</transition>
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
flag:'true',
},
methods:{
change(){
this.flag = !this.flag
},
}
})
</script>
</body>
</html>