vue in third-party plug animate.css achieve animation effects
1. First to introduce a third party like animated.css
2. You will need animation label wrapped up
3. Add enter-active-class element in the transition / leave- active-class attribute departure entrance
front set of values, but must be added animated (not of course be provided on transition animated, the class attribute may be provided on you want to animate tagged animated)
4. may also be added: duration to admission is uniformly set departure time and the length of time
the case is as follows
<!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>