Javascript 在单击时反转CSS3动画

根据一本书，下面的例子应该淡入淡出菜单，但是菜单会立即消失。我认为问题在于

display:none

以某种方式过早生效，但我不确定，因为它在动画中显示

display:block

我该怎么做才能使灰色div平滑地淡出，而不是消失？最好只使用CSS制作动画

CSS

HTML

---

Fiddle:

正如我在评论中所说的，您也可以使用jquery来实现它

jQuery

$(function() {
    $div = $(".div");

    var menu = function () {
        if ( $div.hasClass("shown")) {
            $div.removeClass("shown");
            $div.addClass("hidden");
        } else {
            $div.removeClass("hidden");
            $div.addClass("shown");
        }

    }

    menu();

    $(".click").bind("click", menu);

});

$(".click").on("click", function() {
    $(".div").fadeToggle("slow");
});

HTML

---

新建fiddle:

由于无法在显示元素上转换（将其视为布尔值或枚举，只有“true”和“false”，就像在没有true.5中一样），因此必须使用其他方法隐藏该元素

在这个（）中，我使用了

max height

属性和

overflow:hidden

以及

transition

来设置延迟

.hidden {
    -webkit-animation: fade 2s reverse;
    animation: fade 2s reverse;

    -webkit-transition: 0s all 2s; /* delay this the duration of the animation */
    transition-delay: 0s all 2s;
    max-height: 0;
    padding: 0;

    overflow: hidden;

}

.shown {
    -webkit-animation: fade 2s;
    animation: fade 2s;
    max-height: 5000px; /* some number way bigger than it will ever be to avoid clipping */
}

---

积分：

关键帧仅在ie10及更高版本中受支持。我认为没有理由不使用javascript。无论如何，单击事件都依赖javascript，因此使用css动画不会带来任何好处。您需要将display:none更改为opacity:0将display属性设置为“none”将终止应用于元素及其子体的任何正在运行的动画您可以始终保留display:block。然后添加/删除不透明度为0的类；（你不需要两门课）。最后，你可以用一个过渡代替一个动画（简单得多）。我不知道。在我看来这是正确的。有人可能会因为说CSS3更喜欢你而投票否决你。

$(".click").on("click", function() {
    $(".div").fadeToggle("slow");
});

<div class="bar">
    <a href="#" class="click">Click Me</a>
    <div class="div shown">
        <p>Hello</p>
    </div>
</div>

a {
    color: white;
    text-align: center;
}

.bar {
    height: 20px;
    background: red;
}

.div {
    background: silver;
    padding: 10px;
    display: none;
}

.hidden {
    -webkit-animation: fade 2s reverse;
    animation: fade 2s reverse;

    -webkit-transition: 0s all 2s; /* delay this the duration of the animation */
    transition-delay: 0s all 2s;
    max-height: 0;
    padding: 0;

    overflow: hidden;

}

.shown {
    -webkit-animation: fade 2s;
    animation: fade 2s;
    max-height: 5000px; /* some number way bigger than it will ever be to avoid clipping */
}