javascript - 在 toggleclass 上添加淡入效果？

Question

我想在导航打开和关闭时在切换类上添加淡入/淡出效果。有人知道怎么做吗？我正在使用切换类，因为我之前在调整部分导航消失时遇到响应问题。

FIDDLE example

nav ul.show {
    display: block;
}

对于 javascript

$(function() {
    $('.nav-btn').click(function(event) {
        $('nav ul').toggleClass("show");
    });
});

Answer 1

比起 jquery 动画，我现在更喜欢使用 css 转换。对我来说，这看起来更清晰、更容易阅读，因为逻辑和可视化更加分离。最后， Action 不是褪色，而是状态(或本例中的类)的改变。褪色效果是一种纯粹的视觉噱头。

nav ul {
    display: block;
    opacity: 0;
    transition: opacity 500ms;
}
nav ul.show {
    opacity: 1;
}