今天，在做一个移动端项目，遇到了css3动画卡顿的现象.

例图：

在手势滑动中（swipeLeft,swipeRight）遇到了动画卡顿的现象，最后使用了css3动画-webkit-transform:transition3d(0,0,0) 开启 GPU硬件加速 模式解决。

这种GPU硬件加速在当今PC机及移动设备上都已普及，在移动端的性能提升是相当显著地，所以建议大家在做动画时可以尝试一下开启GPU硬件加速。

直接上代码：

<div class="Hypertension-Exhibition f">
<div class="box">
<ul>
<li>
<img src="./img/2.jpg"/>
<i>希爱力他达拉非片</i>
<var>￥543.00<em>&nbsp;&nbsp;20mg*8片/盒</em></var>
<span>查看详情</span>
</li>
<li>
<img src="./img/2.jpg"/>
<i>希爱力他达拉非片</i>
<var>￥543.00<em>&nbsp;&nbsp;20mg*8片/盒</em></var>
<span>查看详情</span>
</li>
<li>
<img src="./img/2.jpg"/>
<i>希爱力他达拉非片</i>
<var>￥543.00<em>&nbsp;&nbsp;20mg*8片/盒</em></var>
<span>查看详情</span>
</li>
<li>
<img src="./img/2.jpg"/>
<i>希爱力他达拉非片</i>
<var>￥543.00<em>&nbsp;&nbsp;20mg*8片/盒</em></var>
<span>查看详情</span>
</li>
<li>
<img src="./img/2.jpg"/>
<i>希爱力他达拉非片</i>
<var>￥543.00<em>&nbsp;&nbsp;20mg*8片/盒</em></var>
<span>查看详情</span>
</li>
<li>
<img src="./img/2.jpg"/>
<i>希爱力他达拉非片</i>
<var>￥543.00<em>&nbsp;&nbsp;20mg*8片/盒</em></var>
<span>查看详情</span>
</li>
</ul>
</div>
</div>

js代码：

真机测试后，卡顿现象不存在，动画变的流畅了 .

下班了赶紧走了。。。

javascript 手势（swipeLeft,swipeRight）滑动中使用css3动画卡顿，开启硬件加速的更多相关文章

  1. CSS3 动画卡顿性能优化解决方案--摘抄

    最近在开发小程序,与vue类似,它们都有生命周期这回事. onLoad 监听页面加载 onReady 监听页面初次渲染完成 onShow 监听页面显示 到底是什么意思? 所以这又触碰到了我的知识盲区, ...

  2. 关于Office软件中Word输入时卡顿无反应的解决办法！

    最近在安装office2013时遇到了这样一个问题,就是在激活office之后,打开Word输入内容时十分卡顿.也是狂搜网上各种办法,有说改注册表的,也有说在office选项里设置什么输入法的,全试了 ...

  3. firefox中outlook.com页面卡顿的原因

    在火狐中使用outlook.com时,鼠标点击动作后,页面会卡顿一段时间,每次点击都是如此. 因为之前火狐出现由于硬件加速导致页面卡顿的情况,因此第一反应就是关闭硬件加速. 果然,关闭硬件加速后,页面 ...

  4. 如何在React中使用CSS3动画

    一.需求 1.在页面添加item时要有渐变效果 2.单击item可删除,带渐变效果 二.代码 1.通过Reacat插件ReactCSSTransitionGroup实现 <!DOCTYPE ht ...

  5. Android中scrollview嵌套HorizontalScrollView卡顿现象解决

    开发中经验会遇到滑动里面嵌入滑动的问题,但是这种情况下触摸事件就会发生冲突.导致滑动非常卡,甚至出现程序停止响应.这种情况下我们一般需要重写view.下面给出重新scrollview的方法 publi ...

  6. CSS3开启硬件加速

    { transform: translateZ(0); transform: translate3d(0,0,0);}<!-- transform: translateZ(0); transfo ...

  7. JavaScript - 基于CSS3动画的实现

    在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...

  8. PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题

    PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题,PageSlider中加入CSS3动画的话,默认只有首屏是从无到有执行动画,其他屏都是显示下页面再执行动画 这就造成其他屏的动 ...

  9. 用CSS3动画，让页面动起来

    以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...

随机推荐

  1. RNN 入门教程 Part 4 &ndash; 实现 RNN-LSTM 和 GRU 模型

    转载 - Recurrent Neural Network Tutorial, Part 4 – Implementing a GRU/LSTM RNN with Python and Theano ...

  2. 基本的文件 I/O

    基本的文件 I/O MSDN 抽象基类 Stream 支持读取和写入字节.Stream 集成了异步支持.其默认实现根据其相应的异步方法来定义同步读取和写入,反之亦然. 所有表示流的类都是从 Strea ...

  3. StringUtils判断字符串是否为空的方法

    public static boolean isEmpty(String str)   判断某字符串是否为空,为空的标准是 str==null 或 str.length()==0   下面是 Stri ...

  4. Why does yum return error: [Errno 256] No more mirrors to try ?

    https://access.redhat.com/solutions/203603 ISSUE yum update fails with the error : [Errno 256] No mo ...

  5. MVC中的Ajax（AjaxHelper）

    authour: chenboyi updatetime: 2015-04-30 20:47:49 friendly link:   目录 1,思维导图 2,ActionLink() 3,BeginF ...

  6. 绘制基本图形和线型（StrokeStyle）的设置详解

    绘制基本图形和线型(StrokeStyle)的设置详解 目前,在博客园上,相对写得比较好的两个关于Direct2D的教程系列,分别是万一的Direct2D系列和zdd的Direct2D系列.有兴趣的网 ...

  7. laravel框架memcached的使用

    在laravel配置及使用使用 Memcached 缓存要求安装了Memcached PECL 包,即 PHP Memcached 扩展.你可以在配置文件 config/cache.php 中列出所有 ...

  8. switch-case和if-else可互换时

    当switch-case和if-else可互换时,应当优先采用switch-case.因为switch-case的效率更高(详情下回分解).

  9. 三十三、Linux 进程与信号——中断系统调用和函数可重入性

    33.1 中断系统调用 进程调用 “慢” 系统调用时,如果发生了信号,内核会重启系统调用. 慢系统调用 可能会永久阻塞的系统调用 从终端设备.管道或网络设备上的文件读取 向上述文件写入 某些设备上的文 ...

  10. ubuntu更新提示/boot空间不足

    1. 查看当前使用的内核版本 uname -a 2.在终端下察看已经安装的旧的内核: ctrl+alt+t——>进入终端——>输入命令: dpkg --get-selections|gre ...