javascript - 过渡动画错误

如果我在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无法工作？

最佳答案

原因可能是因为win.offsetHeight;导致方法等待几毫秒，然后转换才能再次开始。如果您使用alert(1);代替win.offsetHeight;，它将仍然有效。您需要等待过渡完成才能开始另一个动画。

更新：Fiddle Link

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

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