做了一个animate.css的下拉框改变效果的h5页面，用jq和vue写的，如果要换成原生也很方便。自己随便改改就可以用了。
下面是整个h5页面代码，要用就自己去下载animate.css，然后将js 的路径修改一下就可以了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="../css/animate.css"/>
<style type="text/css">
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
.wai{
width: 100%;
height: 100%;
background-color: rgba(52, 154, 181, 0.9);
display: flex;
justify-content: center;
align-items: center;
}
.cent{
display: flex;
flex-direction:column;
align-items: center;
}
#main1{
margin: 20px;
font-size: 110px;
font-family: "幼圆";
}
.set{
width: 310px;
height: 100px;
display: flex;
justify-content: space-around;
align-items: center;
}
.set select,.set button{
height: 50px;
border: 1px solid #C0C0AA;
border-radius: 10px;
}
.set select{
width: 50%;
font-size: 120%;
}
.set button{
width: 30%;
font-size: 150%;
}
</style>
</head>
<body>
<div class="wai" id="app">
<div class="cent">
<div id="main1">
我很方
</div>
<div class="set">
<select id="cd-dropdown" class="cd-select" @change="sele">
<option v-for="item in list" :key='item.name' :value="item.name" >{{item.name}}</option>
</select>
<button v-on:click="agen">再一次</button>
</div>
</div>
</div>
<script src="../js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
list:[
{name:"bounce"},{name:"flash"},{name:"pulse"},
{name:"rubberBand"},{name:"shake"},{name:"swing"},
{name:"tada"},{name:"wobble"},{name:"jello"},
{name:"bounceIn"},{name:"bounceInDown"},{name:"bounceInLeft"},
{name:"bounceInRight"},{name:"bounceInUp"},{name:"bounceOut"},
{name:"bounceOutDown"},{name:"bounceOutLeft"},{name:"bounceOutRight"},
{name:"bounceOutUp"},{name:"fadeIn"},{name:"fadeInDown"},
{name:"fadeInLeft"},{name:"fadeInDownBig"},{name:"fadeInLeftBig"},
{name:"fadeInRight"},{name:"fadeInRightBig"},{name:"fadeInUp"},
{name:"fadeInUpBig"},{name:"fadeOut"},{name:"fadeOutDown"},
{name:"fadeOutDownBig"},{name:"fadeOutLeft"},{name:"fadeOutLeftBig"},
{name:"fadeOutRight"},{name:"fadeOutRightBig"},{name:"fadeOutUp"},
{name:"fadeOutUpBig"},{name:"flipInX"},{name:"flipInY"},
{name:"flipOutX"},{name:"flipOutY"},{name:"lightSpeedIn"},
{name:"lightSpeedOut"},{name:"rotateIn"},{name:"rotateInDownLeft"},
{name:"rotateInDownRight"},{name:"rotateInUpLeft"},{name:"rotateInUpRight"},
{name:"rotateOut"},{name:"rotateOutDownLeft"},{name:"rotateOutDownRight"},
{name:"rotateOutUpLeft"},{name:"rotateOutUpRight"},{name:"hinge"},
{name:"rollIn"},{name:"rollOut"},{name:"zoomIn"},
{name:"zoomInDown"},{name:"zoomInLeft"},{name:"zoomInRight"},
{name:"zoomInUp"},{name:"zoomOut"},{name:"zoomOutDown"},
{name:"zoomOutLeft"},{name:"zoomOutRight"},{name:"zoomOutUp"},
{name:"slideInDown"},{name:"slideInLeft"},{name:"slideInRight"},
{name:"slideInUp"},{name:"slideOutDown"},{name:"slideOutLeft"},
{name:"slideOutRight"},{name:"slideOutUp"}
],
name:"bounce",
},
mounted: function() {
$("#main1").addClass("animated");
},
methods: {
sele:function(e){
$("#main1").removeClass(this.name).addClass(e.target.value);
this.name = e.target.value;
},
agen:function(){
let name = this.name;
$("#main1").removeClass(name);
setTimeout(function(){
$("#main1").addClass(name);
},0)
},
},
})
</script>
</body>
</html>
