在菜单 li 悬停时，子菜单会弹出而不是淡入答案

【问题标题】：On menu li hover, submenu pops in instead of fading in在菜单 li 悬停时，子菜单会弹出而不是淡入
【发布时间】：2017-03-04 04:44:31
【问题描述】：

我的导航栏有点小问题。当我将鼠标悬停在其中一个父 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 类被移除，它就会被设置为 display: none。

谁能告诉我我在这里做错了什么？淡入很突然（不好），但淡出工作正常。

【问题讨论】：

不透明度过渡在同时更改显示时不起作用。您需要为每个过渡创建关键帧。
如果您已经在使用 jQuery，您可以在子元素上使用“fadeIn() 方法，然后添加类。这样，fadeIn 将更改显示并为其设置动画，然后添加类将永远设置它
LordNero，我首先尝试过，但该网站有其他 css 使 fadeIn() 或 toggleFade() 非常奇怪，所以我选择不使用它。

标签： javascript jquery css sass

【解决方案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;
}

【讨论】：

是的，效果很好。我将子菜单设置为始终是块，并且在我的代码中“显示”的任何地方都设置了“可见性”属性。谢谢。

【解决方案2】：

为了使过渡在这里正常工作，您需要使用两个 css 属性 - 不透明度和可见性（而不是显示）。您可以为下拉菜单（ul）分配绝对位置，然后使用不透明度和可见性属性。然后你可以在你的两个 CSS 属性上进行转换。

transition: opacity 0.6s ease, visibility 0.6 ease;

或

transition: opacity 0.6s ease, visibility 0.6 ease;

【讨论】：