Question

我的导航栏是一个小问题。当我将鼠标悬停在其中一个父元素上时，子元素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类。当m离开li后，ul逐渐淡出，一旦移除了wdac-active类，它就会被设置为display：none。

谁能告诉我这里做错了什么？淡入是突然的（不好），但淡出效果很好。

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;
}

Answer 2

要使转换在此处正常工作，您需要使用两个css属性 - 不透明度和可见性（而不是显示）。您可以为绝对位置指定下拉菜单（ul），然后使用不透明度和可见性属性。然后你可以转换你的两个css属性。

transition: opacity 0.6s ease, visibility 0.6 ease;

或

transition: opacity 0.6s ease, visibility 0.6 ease;

在菜单li hover上，子菜单弹出而不是淡入

2 个答案: