做了一个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>
