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

问题描述

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

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

解决方案

http://blog.sina.com.cn/s/blog_4628b2590102vkbq.html

解决方案二:

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

时间: 2024-08-31 04:15:16

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

原生JS操作网页给p元素添加onclick事件及表格隔行变色_javascript技巧

1. 给网页中的所有p元素添加onclick事件: 复制代码 代码如下: <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <title>Insert title here</title> <!-- <script src="jQuery/jquery-1.10.2.

移动端js触摸事件详解_javascript技巧

在移动开发中,一种较为容易的做法是,先在桌面上开始原型设计,然后再在打算要支持的设备上处理移动特有的部分.多点触摸正是难以在PC上进行测试的那些功能之一,因为大部分的PC都没有触摸输入.  不得不在移动设备上进行的测试有可能会拉长你的开发周期,因为你所做的每项改变都需要提交代码到服务器上,接着再加载到设备上.然后,一旦运行后,对应用也就没有太多的调试了,因为平板电脑和智能手机都很缺乏web开发者所用的工具. 这个问题的一个解决方案是在开发机器上模拟触发事件.对于单点触摸,触摸事件可以基于鼠标事件

zepto.js中tap事件阻止冒泡的实现方法

 这篇文章主要介绍了zepto.js中tap事件阻止冒泡的实现方法,实例分析了由冒泡产生的click延迟解决方法,需要的朋友可以参考下     本文实例讲述了zepto.js中tap事件阻止冒泡的实现方法.分享给大家供大家参考.具体如下: 最近在弄一个手机版的网站,本来想用jQuery Mobile,但文件太大了,所以用了zepto.js 由于移动网页中使用click事件会有延迟,所以就用上了zepto.js中的tap事件. 使用click事件可以使用stopPropagation来阻止冒泡,但

asp.net-请教ASP.NET MVC开发的网站,在手机浏览器上js点击事件失效的问题

问题描述 请教ASP.NET MVC开发的网站,在手机浏览器上js点击事件失效的问题 之前没有接触过手机浏览器端的东西,一直做的是web方面,最近刚做了一个新项目刚刚上线,是一个挖宝游戏,http://wabao.edushi.com 经理要求把手机端兼容性弄一下让手机端也可以正常使用,但是我发现用手机访问,很多点击事件都失效了,有一部分还是有效的,不明白为什么,我用chrome的toggle device mode,也是某些按钮是有效的某些按钮点了就没反应,console也没报错,完全不知道问

微信H5支付

本篇文件来聊聊微信服务商模式以及商户模式下微信H5支付 先说一个事情.8月1号开始微信公众平台支付的开发配置页面迁移至商户平台 详细说明参考这个或者看下面的截图 官方文档 普通商户版-微信H5支付 服务商版-微信H5支付 1.申请开通微信H5支付 服务商模式下点击申请开通会立即开通,邀请子商户时需要填写子商户的信息.服务商模式下与商户模式下主要的区别在于商户模式下不用填写特约商户信息.只需要填写商户H5支付相关的信息 如下图 注意 填写的H5支付域名必须是对应网站备案的域名且备案主体还得与商户的

移动端JS 触摸事件基础

一.手机上的触摸事件 基本事件: touchstart   //手指刚接触屏幕时触发 touchmove    //手指在屏幕上移动时触发 touchend     //手指从屏幕上移开时触发 下面这个比较少用: touchcancel  //触摸过程被系统取消时触发 每个事件都有以下列表,比如touchend的targetTouches当然是 0 咯: touches         //位于屏幕上的所有手指的列表 targetTouches   //位于该元素上的所有手指的列表 change

javascript-菜鸟求js大神帮忙!!为什么我这段js代码只有第一个元素绑定了事件

问题描述 菜鸟求js大神帮忙!!为什么我这段js代码只有第一个元素绑定了事件 <script> window.onload=function(){ var oParent=document.getElementById("aa"); var boxs=oParent.getElementsByClassName("box"); for(var i=0;i<boxs.length;i++){ var imgs=boxs[i].getElementsB

js 动态给元素添加、移除事件的实现方法_javascript技巧

最近项目中要要到 js动态给给元素绑定事件,刚好之前没用到过这些,顺便学习一下,于是google了一下 事件,写了如下两个事件 一个添加事件 ,一个是移除事件 /addEventListener(),removeEventListener()用于处理指定和删除事件处理程序的操作 //作用域:事件处理程序会在其所属元素的作用域内运行 //addEventListener(event,function,capture/bubble);removeEventListener(event,functio

js实现动态创建的元素绑定事件_javascript技巧

新创建的元素用传统的办法无法绑定,需要用live方法. 例: $('.rule').live('mouseover', function () { $(this).addClass("cancelable"); 以上这篇js实现动态创建的元素绑定事件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持. 以上是小编为您精心准备的的内容,在的博客.问答.公众号.人物.课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js javascript 动态绑定.动态