<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<link rel="stylesheet" href="css/animate.min.css">
<!--入場(chǎng)使用 bounce-In 離場(chǎng)使用 bounce-Out-->
<script src="js/vue.js"></script>
<body>
<!--需求：點(diǎn)擊按鈕讓H3顯示 再點(diǎn)擊讓H3隱藏-->
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<!--<transition enter-active-class=" animated bounceIn" leave-active-class=" animated bounceOut">
<h3 v-if="flag">這是一個(gè)H3</h3>
</transition>-->
<!--使用 ：duration="毫秒值" 統(tǒng)一設(shè)置 入場(chǎng)和離場(chǎng)時(shí)候的動(dòng)畫時(shí)長(zhǎng)-->
<!--<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="400">
<h3 class="animated" v-if="flag">這是一個(gè)H3</h3>
</transition>-->
<!--使用duration傳入對(duì)象來(lái)分別設(shè)置入場(chǎng)時(shí)長(zhǎng)和離場(chǎng)時(shí)長(zhǎng)-->
<transition
enter-active-class="bounceIn"
leave-active-class="bounceOut"
:duration="{ enter:200,leave:500}"
>
<h3 class="animated" v-if="flag">這是一個(gè)H3</h3>
</transition>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
flag:false
},
methods:{
}
})
</script>
</html>
用到了第三方 animate.css 庫(kù)
