前面是vue 自带的, 需要定义style 非常的烦, 怎么解决呢, 用第三方库就行了, 他已经定义好了css 样式,拿来直接用就行了 。
例子如下:
<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duratio="300">
<h3 v-if="flag" class="animated">动画类效果演示</h3>
</transition>
解析下:
- enter-active-class 相当于 vue 的 enter
- leave-active-class 相当于 vue 的leave 封装
- duration 设置 时间的
- class=“animated” 设置基本类 ,都是在这个继承的。
拿到全部的代码 可以尝试下,感受下效果 :
<!DOCTYPE html>
<link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" >
<link href="https://cdn.bootcss.com/flat-ui/2.3.0/css/flat-ui.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>动画效果</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../Documents/lib/animate.css">
</head>
<body>
<div id="p">
<input type="button" @click="flag=!flag" value="button">
<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="300">
<h3 v-if="flag" class="animated">动画类效果演示</h3>
</transition>
</div>
<script>
var vue= new Vue(
{
el: '#p',
data:{
flag:false
},
methods:{
dh(){
}
}
}
)
</script>
</body>
</html>