Question

如果我在showAnimateWin属性offsetHeight中使用，动画工作。 example

function end( ) {

    var  top = ( window.innerHeight - win.clientHeight ) / 2,
        left = ( window.innerWidth - win.clientWidth ) / 2;

    win.style.top = top + "px";
    win.style.left = left + "px";
}

function showAnimateWin( ) {
        win.offsetHeight ;//here

        win.classList.add("modal-window-animate");
        end();
 };

如果我删除了win.offsetHeight，动画只能工作一次。 example

function showAnimateWin( ) { 
        win.classList.add("modal-window-animate");
        end();
 };

如果没有win.offsetHeight，为什么不能工作？

Answer 1

原因可能是因为win.offsetHeight;导致方法在转换再次开始之前等待几毫秒。如果您放置alert(1);而不是win.offsetHeight;，它仍然可以使用。在开始另一个动画之前，您需要等待转换完成。

更新：Fiddle Link

这应该没有任何延迟（检查小提琴）：

window.setTimeout(function() {
        showAnimateWin();
    }, 25);

过渡动画bug

1 个答案: