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

首先，对不起我的英语不好。我有一些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>

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 Studter可能与使用jQuery代码有关，而不是优化jQuery代码。

感谢您的建议。这并不完美，但口吃几乎消失了。我认为.load（）-命令会产生更多的负载，因此会导致口吃。很高兴它有所帮助。如果你能得到一个JSFIDLE或类似的演示，我会有兴趣看更多。今天下午我将尝试制作一个JSFIDLE。

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