为什么 CSS 转换不会渲染？答案

【问题标题】：Why won't CSS transformations render?为什么 CSS 转换不会渲染？
【发布时间】：2014-09-08 21:09:45
【问题描述】：

当您上下滚动页面时，我制作了一个在 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

编辑：我已经更新了小提琴，以便翻转适应上下滚动。此更改并未改变转换问题，因此为了便于阅读，我将保留问题中的代码。

【问题讨论】：

标签： javascript jquery css css-transforms

【解决方案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

【讨论】：

【解决方案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 属性，否则在过渡仍在进行时滚动可能会导致问题。

【讨论】：