事件'transitionend'被称为太早,它会延迟渲染

Question

我在做什么,什么是错的

当我点击一个按钮时,会出现一个滑块.(这里是它的样子的一个例子,不要注意这段代码)

滑块通过动画显示.动画结束后,我应该包含一个我从服务器加载的HTML页面.我需要在动画之后在滑块中应用HTML,否则动画停止(重新计算DOM).

我的算法

1. 启动请求以使HTML显示在滑块内
2. 开始动画

3. 等待数据准备就绪并完成转换

   为什么？如果我在动画期间应用HTML,它会在将新HTML添加到DOM时停止动画.所以我等到第4步之前结束.

4. 在滑块内应用HTML

这是缩短的代码:

// Start loading data & animate transition
var count = 0;
var data = null;

++count;
$.get(url, function (res) {
    data = res;
    cbSlider();
});

// Animation starts here

++count;
$(document).on('transitionend', '#' + sliderId, function () {
    $(document).off('transitionend', '#' + sliderId);
    cbSlider()
});

function cbSlider() {
    --count;
    // This condition is only correct when both GET request and animation are finished
    if (count == 0) {
        // Attempt to enforce the frame to finish (doesn't work)
        window.requestAnimationFrame(() => { return });

        $('#' + sliderId + ' .slider-content').html(data);
    }
}

详细的问题

transitionend被称为太早了.它使最后一个动画帧太长(477.2ms),最后一帧不会在transitionend事件中呈现.

从谷歌文档,我可以告诉你的是,涂料和复合工序像素管线被称为之后的Event(transitionend):

也许我在想这个.

我该如何处理这种动画？

如何等待动画完全渲染和渲染？

Answer 1

好吧，如果过渡不能按照您想要的方式工作，您可以回到几年前并使用 jQuery 动画吗？

(function(slider){
    $.get(url, function (res) {
        slider.animate({
            // put whatever animations you need here
            left: "5%",
        }, 5000, function() {
            // Animation complete.
            slider.find('.slider-content').html(res);
        });
    });
}($('#' + sliderId)));

您还可以同时启动这两个操作，然后仅在动画完成且请求完成后才将 html 添加到文档中，但这需要一个标志。

(function(slider){

    // whether the animation is finished
    var finished = false;

    // whether the html has been added already
    var added = false;

    // your html data
    var html = null;

    function add() {
        if (finished && html && !added) {

            // make sure function will only add html once
            added = true;

            slider.find('.slider-content').html(html);
        }
    }

    $.get(url, function (res) {
        html = res;
        add();
    });

    slider.animate({
        // put whatever animations you need here
        left: "5%",
    }, 5000, function() {
        // Animation complete.
        finished = true;
        add();
    });

}($('#' + sliderId)));