首页 文章

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

提问于
浏览 次
0

我的导航栏是一个小问题 . 当我将鼠标悬停在其中一个父元素上时，子元素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 .

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

javascript jquery css sass

2 回答

  • 0

    如果您将下拉列表设置为父项下的绝对值，则可以使用可见性而不是显示：

    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;
}
    回复于
  • 0

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

    transition: opacity 0.6s ease, visibility 0.6 ease;

    要么

    transition: opacity 0.6s ease, visibility 0.6 ease;
    回复于

相关问题