vue中使用第三方插件animate.css實現動畫效果
1.首先先引入第三方類animated.css
2.將你所需要動畫的標簽用包裹起來
3.在transition元素中添加enter-active-class/leave-active-class入場離場屬性
但是設置的值前面必須加上animated（當然也可以不在transition上設置animated，可以在你所要進行動畫的標簽上設置class屬性為animated）
4.也可以加入:duration來統一設置入場和離場時候的時長
案例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="lib/vue.js"></script>
<link rel="stylesheet" href="lib/animate.css">
</head>
<body>
<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">這是一個H3</h3>
</transition> -->
<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration:"400">
<h3 v-if="flag" class="animated">這是一個H3</h3>
</transition>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
flag:false
},
methods:{
}
})
</script>
</body>
</html>