Question

当你在页面上下滚动时，我制作了一个在X轴上旋转的盒子。

$(window).scroll(function (event) {
    clearTimeout(timeout);
    timeout = setTimeout(finish_rotation, delay);
    scroll = $(window).scrollTop() * 2;
    animate_rotation();
});
function animate_rotation(){    
    var translate = 'rotateX(' + scroll + 'deg)';
    $('.flipper').css('transform', translate);
}

当你停止滚动时，我让它完成旋转到最近的180的倍数，以便它完成它的旋转。这是在finish_scroll中完成的。

function finish_rotation (){
    var goal_rotation = 180*Math.ceil(scroll/180);
    while(scroll < goal_rotation){
        scroll++;
        animate_rotation();
    }
}

问题是，它实际上并没有为旋转的其余部分设置动画，而是直接到达完成的位置。我可以确认在finish_rotation的while循环中为每次迭代调用animate_rotation，但我无法弄清楚为什么动画似乎没有发生。我认为动画可能发生得太快或太近，所以我尝试改变量增加滚动，并在每个animate_rotation调用上添加一个setTimeout，但它仍然不会动画所有步骤。为什么不能播出所有的动画？

有关工作示例，请点击此处：JSFiddle

编辑：我更新了小提琴，以便翻转适应上下滚动。这个改变并没有改变转换问题，所以为了便于阅读，我将把问题留在问题中。

Answer 1

finish_rotation()函数似乎正好走向终点，因为它过快了。要查看动画，您需要在循环中设置超时。

以下是如何操作的示例：

function finish_rotation (){
    var goal_rotation = 180*Math.ceil(scroll/180);

    setTimeout(function(){
        scroll++;
        animate_rotation();
        if (scroll < goal_rotation)
            finish_rotation();
    }, 10);
}

Updated JsFilled here

Answer 2

while循环是同步的，因此它会在向页面呈现任何内容之前完成处理。

考虑使用此finish_rotation函数：

function finish_rotation() {
    var goal_rotation = 180*Math.ceil(scroll/180);
    $('.flipper').css({
        "transition" : "transform "+((goal_rotation-scroll)*10)+"ms linear",
        // Adjust that *10 as needed for your desired speed
        "transform" : "rotate("+goal_rotation+"deg)"
    }).one("transitionend",function() {
        $(this).css({"transition":""});
    });
}

您可能需要在window.scroll块中添加更多代码，以取消绑定transitionend事件并删除transition属性，否则在转换仍在进行时滚动可能导致问题。

为什么不会渲染CSS转换？

2 个答案: