过渡动画错误

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

这应该没有任何延迟（检查 fiddle）：

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

过渡动画错误

Transition animation bug

javascript

css

animation