javascript - css 动画和 jquery .load() 在移动设备上卡顿

Question

首先，抱歉我的英语不好。我有一些 CSS stroke-dasharray 动画，如果通过将新的 css 类添加到 div 单击按钮，它们将触发。最重要的是，使用 jquery .load() 加载文本文件。遗憾的是，在我的移动设备上，动画会断断续续。我试过了

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

hack 但还是卡顿。我还将 .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);
}

j查询:

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);
});

Answer 1

您希望避免添加会导致页面重绘的 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;
}

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

在这种情况下，修复卡顿可能与利用 hardware-accelerated CSS 更多相关而不是优化 jQuery 代码。