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

Question

First, sorry for my bad English. I have some CSS stroke-dasharray animations which will trigger if a button is clicked by adding a new css-class to a div . On top of that, a text-file is loaded using jquery .load() . Sadly, on my mobile devices, the animation will stutter. I tried the

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

hack but it is still stuttering. I also put the .attr() stuff at the callback position of the .load() so its triggered after loading finished. But its still stuttering.

My Question: is there an alternative for jquery .load() which will not stutter on mobile devices? Or are there any other optimizations?

My code so far:

<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

You want to avoid adding CSS that will causes a repaint of the page. When you add the stroke, that has some size. Even if you don't see anything on the page moves, it must be recalculated.

Instead of add/removing the stroke, try just making it visible and invisible. Making the stroke match the background color might help.

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

It's often possible to optimize jQuery code by writing vanilla JS, but the improvements are typically marginal, and the result is typically more difficult to maintain. Optimize the custom code first.

In this case, fixing the janky stutter will probably have more to do with utilizing hardware-accelerated CSS than optimizing the jQuery code.