javascript - 微信浏览器、内部浏览器（公司客户端自带） css3动画 滑动时动画不动了
本文介绍了javascript - 微信浏览器、内部浏览器（公司客户端自带） css3动画 滑动时动画不动了的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
先把代码扔下边。没什么奇怪的东西。当手指去滑动页面的时候，动画会停止。这是为什么？有什么解决办法？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@keyframes ani{
0%{top:0;transform: translate(0px);}
10%{transform: translate(30px);}
20%{transform: translate(0px);}
30%{transform: translate(30px);}
40%{transform: translate(0px);}
50%{transform: translate(30px);}
60%{transform: translate(0px);}
70%{transform: translate(30px);}
80%{transform: translate(0px);}
90%{transform: translate(30px);}
100%{ top:100%; transform: translate(0px); }
}
.animate{
top:0;
animation:ani 10s ease-out;
animation-fill-mode:both;
}
div{width:100px;height:100px;border-radius:50%;position: fixed;top:0;left:300px;background-color: #00cced}
</style>
</head>
<body>
<div class="animate"></div>
</body>
</html>解决方案
拖动时候需要重新计算页面与重新绘制可视部分，会暂时停用浏览器内部的重绘（就是动画顶住）；为了节省终端性能资源的行为...
这篇关于javascript - 微信浏览器、内部浏览器（公司客户端自带） css3动画 滑动时动画不动了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
