Question

首先，抱歉我的英语不好。我有一些CSS stroke-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);
});

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代码，但改进通常是微不足道的，结果通常更难以维护。首先优化自定义代码。

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

css动画和jquery .load（）在移动设备上口吃

1 个答案: