css动画和jquery.load(）在移动设备上断断续续

css animation and jquery .load() stuttering on mobile devices

本文关键字：移动 断断续续 动画 jquery load css      更新时间：2023-09-26

首先，对不起我英语不好。我有一些CSS笔划dasharray动画，如果在div中添加一个新的CSS类来点击按钮，就会触发这些动画。除此之外，还使用jquery .load()加载了一个文本文件。遗憾的是，在我的移动设备上，动画会断断续续。我试过

transform: translateZ(0);
-webkit-transform: translateZ(0);

黑客，但它仍然结结巴巴。我还把.attr()的东西放在.load()的回调位置，这样它在加载完成后就会被触发。但它仍然结结巴巴。

我的问题：jquery .load()有没有一种在移动设备上不会卡顿的替代方案？或者还有其他优化吗？

到目前为止我的代码：

<div>
    <svg>
        <path id="path1" class="path_before" d=... />
    </svg>
</div>
<div id="container>
</div>

CSS：

.path_before
{
    stroke: none;
    fill: none;
}
.path_after
{
    stroke: #6699ff;
    stroke-width: 4px;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dash 4s linear forwards;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

jquery:

var values = "0;1;2;3;4;5;6".split(";"),
    currentIndex = 0;
function next() {
    $("#container").load("content/content.txt #schritt" + values[currentIndex], function(){    
        $("#path" + values[currentIndex]).attr( "class", "path_after");
        currentIndex = currentIndex + 1
    });
};
$(document).ready(function(){
    $("#next").click(next);
});

您希望避免添加会导致重新绘制页面的CSS。当你添加笔划时，它有一定的大小。即使您在页面上没有看到任何移动，也必须重新计算。

与其添加/删除笔划，不如尝试使其可见和不可见。使笔划与背景颜色匹配可能会有所帮助。

.path 
{
        stroke: #6699ff;
        stroke-width: 4px;
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: dash 4s linear forwards;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
}
.path.path_before
{
        -webkit-text-stroke: 1px white;
}
.path.path_after
{
        -webkit-text-stroke: 1px black;
}

通常可以通过编写普通JS来优化jQuery代码，但改进通常是微不足道的，结果通常更难维护。首先优化自定义代码。

在这种情况下，修复janky卡顿可能更多的是利用硬件加速的CSS，而不是优化jQuery代码。

相关文章：