过渡需要延迟

Question

我通过单击切换来触发导航。此切换在nav元素上添加一个“active”类，以显示或隐藏它。要为它设置动画，nav元素每个默认值都有一些样式，转换语句和一些相反的样式通过“active”类。

为了防止使用display：none / block转换问题，我首先切换此属性，然后添加/删除该类。

现在很奇怪：

要实际看到转换，我需要在切换display属性后设置延迟。但是：这个延迟也可以是0。

有没有人知道为什么需要这个延迟，如果它实际上可以为零？

这是一个例子（简化）：

CSS：

#nav-main {
  display: none;
  transition: all 2s;
  opacity: 0.0;
}

#nav-main.active {
  opacity: 1.0;
}

JS：

$(function() {

    $("#open").on("click", function(e) {
        e.preventDefault();

        $("#nav-main").show();
        $("#nav-main").addClass("active");
    });

    $("#open-delay").on("click", function(e) {
        e.preventDefault();

        $("#nav-main").show();
        window.setTimeout(function() {
            $("#nav-main").addClass("active");
        }, 0);
    });

    $("#close").on("click", function(e) {
        e.preventDefault();

        $("#nav-main").removeClass("active");
        // here the delay is needed, because we have to wait
        // for the animation to finish, before we hide the element
        window.setTimeout(function() {
            $("#nav-main").hide();
        }, 2000);

    });
});

工作示例

https://jsfiddle.net/k9gp3qe2/1/

感谢您的帮助

·阿尔