javascript - 在悬停菜单上，子菜单弹出而不是淡入

Question

我的导航栏有一个小问题。当我将鼠标悬停在其中一个父 li 元素上时，子 ul 元素(下拉菜单)突然弹出。当我将鼠标悬停在它上面时，它会按原样消失(淡出)。

这是 HTML 结构的示例:

<header id="masthead">
    <ul id="menu-main-menu-tabletdesktop" class="menu">
        <li><a href="/some-link/">Parent</a>
            <ul class="sub-menu">
                <li><a href="/some-link/a/">Link A</a></li>
                <li><a href="/some-link/b/">Link B</a></li>
                <li><a href="/some-link/c/">Link C</a></li>
            </ul>
        </li>
    </ul>
</header>

这是 SCSS:

@mixin transition($target, $time) {
    -webkit-transition: $target $time ease-in-out;
    transition: $target $time ease-in-out;
}
header#masthead .main-menu ul > li:not(.wdac-active) > ul.sub-menu {
    display: none;
}
header#masthead .main-menu ul > li > ul.sub-menu {
    opacity: 0;
    @include transition(opacity, 0.6s);
}

header#masthead .main-menu ul > li:hover > ul.sub-menu,
header#masthead .main-menu ul > li:focus > ul.sub-menu {
    opacity: 1;
    @include transition(opacity, 0.6s);
    display: block;
}

header#masthead .main-menu ul > li.wdac-active > ul.sub-menu {
    display: block;
}

在0.6s后给它添加一个.wdac-active类的jQuery如下:

$("#masthead ul.menu > li").on("hover", function() {
    var $menuItem = $(this);
    setTimeout(function() {
        $menuItem.toggleClass("wdac-active");
    }, 600);
});

所以我想要发生的是，在悬停时，ul 设置为阻塞并慢慢淡入，然后应用 wdac-active 类。鼠标离开 li 后，ul 慢慢淡出，一旦 wdac-active 类被删除，它就会设置为显示:无。

谁能告诉我我做错了什么？淡入突然(不好)，但淡出效果很好。

Answer 1

如果您将下拉菜单放置在父项的绝对位置，则可以使用可见性而不是显示:

visibility: hidden;
opacity: 0;
transition: visibility 0s 0.5s, opacity 0.5s ease-out;

&.visible {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}