2 xiongxing90 xiongxing90 于 2016.03.16 22:19 提问

js通过触摸事件给元素添加animation动画,在安卓微信浏览器很卡,而且动画延迟很高

js通过添加class类,class类里面写了相应的animation动画,但是事件触发的时候animation动画很卡,而且事件触发后等一会动画才出来。希望懂的人来回答:
1.事件是touchstart (不是click事件的那种300ms的延迟)
2.所有元素都是绝对定位(不会导致layout重绘)
3.没有添加任何延迟函数,animation-delay为0s
4.就算我不添加class类,直接把animation动画写在元素上面,通过事件控制元素显示来触发animation动画也会卡,而且动画延迟照样高
5.建议大家先用安卓手机试验一下再来回答我这个问题

3个回答

devmiao
devmiao   Ds   Rxr 2016.03.17 01:44
xiongxing90
xiongxing90 谢谢你的回答,不过对我这个问题没有帮助
2 年多之前 回复
showbo
showbo   Ds   Rxr 2016.03.17 09:18

计时器delay设置为1ms试试,你设置0 pc端也会有延时效果,微信可能改过内核,直接变for循环什么的导致ui阻塞了

xiongxing90
xiongxing90 这个和计时器没有关系,用class来控制animation动画在安卓有兼容性问题,哎,安卓兼容性好难搞,谢谢你的回答
2 年多之前 回复
github_32626373
github_32626373   2016.06.13 14:07

移动端动画推荐使用xx3d的模式启动GPU加速,会对动画有很大的提升。

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
监听animation动画事件
当你需要在某个动画开始或者结束时,去触发某一个事件,那么这时候可以用到监听animation事件方法; 具体如下:     1、-webkit-animation动画其实有三个事件:     开始事件 webkitAnimationStart     结束事件 webkitAnimationEnd     重复运动事件 webkitAnimationIteration
移动端js触摸事件
触摸屏上(手机web,平板web)的javascript事件——开发者工具 开发者工具 在移动开发中,一种较为容易的做法是,先在桌面上开始原型设计,然后再在打算要支持的设备上处理移动特有的部分。多点触摸正是难以在PC上进行测试的那些功能之一,因为大部分的PC都没有触摸输入。 不得不在移动设备上进行的测试有可能会拉长你的开发周期,因为你所做的每项改变都需要提交代码到服务器上
css3动画库——animate.css以及css3动画一些有趣的实现
简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果。 虽然借助 animate.css 能够很方便、快速的制作 CSS3 动画效果,但还是建议
微信浏览器下控制动画的动与停
在做播放器时播放盘在控制下暂停与转动 发现微信浏览器下js控制style的 -webkit-animation-play-state: paused; 无法无法响应,于是通过修改类名去实现这个暂停 新建两个这样的动画类,再通过js修改类 .paused{ -webkit-animation: xuanzhuan 8s both linear infinite;
cocos2d-x 3.0 动画与触摸事件总结
动画与触摸 动画 动画分为两部分  animation   与 animate   将动画类比为连环画,则 animation相当于造书的过程 而 animate则为快速翻书的动作 通常会再添加一个repeateForever的动作,确保动画一直继续下去 1️⃣animation 首先创建精灵帧缓存,然后将许多图片合成一张大图片与plist文件,加入缓存中    // 创建获取精灵帧缓
解决DIV中元素append手机浏览器追加问题
最近在做一个web项目,遇到了一个问题,那就是div中的元素用append来追加的元素,pc端能正常的显示,而到了手机浏览器中,却没有生效,以至于查了很多资料, 都没有找到其解决的方法,最后才发现用appendChild代替append,就解决了其问题,在此做一个记录,希望遇到此问题的同学可以谨记。
Android动画--布局动画 LayoutAnimation
LayoutTransition相关的属性值 APPEARING:当一个View在ViewGroup中出现时,对此View设置的动画 CHANGE_APPEARING:当一个View在ViewGroup中出现时,对此View对其他View位置造成影响,对其他View设置的动画。 DISAPPEARING: 当一个View在ViewGroup中消失时,对此View设置的动画。
animate cc在ios上点击canvas闪黑以及在安卓微信里巨卡的解决方案
在ios里点canvas整个页面会闪黑一下,只需要在js最后增加一句代码即可 createjs.Touch.enable(stage); 在微信里巨卡,也是一行代码
关于css动画的优化
css 动画
CSS3中Animation为同一个元素添加多个动画效果
CSS3 Animation 并未提供 给一个元素同时添加多个动画效果的方法,就是说一个元素,只能给它定义一个动画效果,不能同时定义。 需求说明 比如说,我想实现一个这样的动画效果: 一颗星星从上往下滑落,当滑落到指定位置时开始闪烁 这里就用到了两个动画效果: 1. 从上往下滑落 (单次动画) 2. 闪烁 (循环动画) 因为 CSS3 Animation 是不能给星星这个