javascript - 为什么用zepto的swipeLeft时间改变translate的值在微信表现的特别卡顿?

问题描述

问 题

css：
.hotSingerwrap{
            width:7.48rem;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            transition-timing-function: cubic-bezier(0.1,0.57,0.1,1);
            transition-duration: 0ms;
            transform: translate(0px，0px);
}
js：
$("#hotSingerwrap").swipeLeft(function(){
    var a     = $(this).css("transform")
    var b   = a.split(",")[4];
    if (b>-365) {
        index--;
        $(this).css("transform","matrix(1, 0, 0, 1, "+index*50+",0)");
    }
})

在微信端特别卡顿，请问有什么解决办法没。求推荐做类似效果比较好用的插件

解决方案

因为Android微信性能很差的，处理这种运动都是非常卡顿。

优化有2个方向，一是设置translateZ的值，启用浏览器的gpu加速
而是采用节流的方式

所以一般都要采用节流方式，至于插件我还没遇到过，我都是自己写节流，节流之后不会卡顿，但是动画效果也不会太好。
关于节流的具体实现，这里贴个链接就好了，要详细说起来又可以写一篇文章了
https://keelii.github.io/2016/06/11/javascript-throttle/

实际中的解决方案就是在Android微信上劲量避免使用动画。

这篇关于javascript - 为什么用zepto的swipeLeft时间改变translate的值在微信表现的特别卡顿?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！