之前做了一个H5的问答小游戏，打错的时候全屏弹出一个错误的图片。刚开始直接用JQUERY的fadein，fadeout，手机上卡得不能看。网上搜了一轮，按照大神的方法进行了优化，动画流畅度噌噌噌的上去了：
优化前
<imgid="wrong"src="img/wrong.png"style="position: absolute; width: 100%; height: 100%; top:0%; left: 0%;display: none;>
<script>
$("#wrong").fadeIn(500,'easeOutBounce').delay(500).fadeOut(500, nextq);
</script>
触发事件时，使用fadeIn/fadeOut显示隐藏层，在手机浏览器上会卡顿
优化后
<imgid="wrong"src="img/wrong.png"style="position: absolute; width:100%; height:100%; top:0%; left:100%;opacity:0; transition: opacity 0.5s;">
<script>
$("#wrong").css("opacity","1");
$("#wrong").css("left","0px");
setTimeout(function(){
$("#wrong").css("opacity","0");
},1000);
setTimeout(function(){
$("#wrong").css("left","100%");
nextq();
},1500);
</script>
隐藏显示使用CSS的transition的动画，并且元素不再是隐藏的，而是位置在屏幕外，浏览器不用重新生成框架。在手机上动画流畅
参考：
https://www.qianduan.net/high-performance-css3-animations/
