摘要：一丶方法可以细化操作，回调方法，但是在移动端安卓卡顿二丶可以用细化过渡效果，没有回调操作，只能监控是否已完成。会存在过度绘制，会造成帧丢失，继而导致动画断续显示。
一丶jq/zepto animate()方法
可以细化操作，回调方法，但是在移动端（安卓）卡顿
二丶css3 animation可以用@keyframes细化过渡效果，没有回调操作，只能监控animation/transition是否已完成。
三丶transform 过渡top/left 导致重绘，手机性能不好时依然卡顿使用绝对位置定位页面上的动画元素，将其脱离文档流，可以有效的防止重排。
使用transform:translateY/X来移动元素 scale()缩放元素
加上 -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); 开启GPU硬件加速
[参考链接]http://blog.csdn.net/majun000...
四丶RequestAnimationFrame如果你需要细化过渡效果，但是使用setTimeout可能在性能不够的手机上还是会出现卡顿的情况，我就遇到了这样的情况。 setTimeout会存在过度绘制，会造成帧丢失，继而导致动画断续显示。这也是setTimeout的定时器值推荐最小使用16.7ms的原因（16.7 = 1000 / 60, 即每秒60帧）。而requestAnimationFrame是跟着浏览器绘制来的，不会存在过度绘制，也就不会出现动画卡顿的情况。
参考链接代码
元素display:none的时候是拿不到transform的值（其他属性没试），解决办法：用visibility: hidden;
过渡动画的时候，先让元素display:block 马上执行css3动画，结果浏览器直接忽略过渡动画，渲染最后的结果。
解决办法：使用延时器(1ms)，延迟一点css3动画的执行。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113088.html
摘要：一丶方法可以细化操作，回调方法，但是在移动端安卓卡顿二丶可以用细化过渡效果，没有回调操作，只能监控是否已完成。会存在过度绘制，会造成帧丢失，继而导致动画断续显示。 一丶jq/zepto animate()方法 可以细化操作，回调方法，但是在移动端（安卓）卡顿 二丶css3 animation 可以用@keyframes细化过渡效果，没有回调操作，只能监控animation/transi...
摘要：如何让我们所开发的手机页面能有更好的交互体验，就是这篇文章的主旨移动开发问题和优化小结。关于和鼠标事件的延迟说明，我引用叶小钗大神博客里面的一张图片，如下在手机上，的延迟将近。 1.前言 到目前为止，互联网行业里，手机越来越智能化，移动端占有的比例越来越高，尤其实在电商，新闻，广告，游戏领域。用户要求越来越高，网站功能越来越好，效果越来越炫酷，这就要求我们产品质量越来越高，web前端开...
摘要：如何让我们所开发的手机页面能有更好的交互体验，就是这篇文章的主旨移动开发问题和优化小结。关于和鼠标事件的延迟说明，我引用叶小钗大神博客里面的一张图片，如下在手机上，的延迟将近。 1.前言 到目前为止，互联网行业里，手机越来越智能化，移动端占有的比例越来越高，尤其实在电商，新闻，广告，游戏领域。用户要求越来越高，网站功能越来越好，效果越来越炫酷，这就要求我们产品质量越来越高，web前端开...
摘要：在做移动开发时有很多地方跟端是不一样的，需要不一样的设置，这里就记录下移动开发中有用的设置和一些通用代码。其他关于打电话发短信发邮件的实现打电话给发短信给发邮件给关于布局移动端中对于的支持已经很好，是布局神器。 在做移动 Web 开发时有很多地方跟 PC 端是不一样的，需要不一样的设置，这里就记录下移动 Web 开发中有用的设置和一些通用代码。 我的博客地址 HTML 设置页面宽度等于...
阅读 3371·2021-11-24 10:30
阅读 3231·2021-11-22 15:29
阅读 3688·2021-10-28 09:32
阅读 1172·2021-09-07 10:22
阅读 3295·2019-08-30 15:55
阅读 3599·2019-08-30 15:54
阅读 3473·2019-08-30 15:54
阅读 2815·2019-08-30 15:44
