Bootstrap CSS 过渡悬停

Question

您好，我正在尝试复制 devdojo.com (https://devdojo.com/ebook/laravelsurvivalguide) 的精美 CSS 过渡下拉菜单，但无法复制。它是主菜单中 3 个点的悬停。也许我错过了什么？谢谢！

我的 CSS：

.dropdown-menu-animated {
    border: 0 none;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
    display: block;
    margin-top: 0;
    opacity: 0;
    transform: scale3d(0.95, 0.95, 1) translate3d(0px, -15px, 0px);
    transform-origin: 100% 0 0;
    transition-delay: 0s, 0s, 0.5s;
    transition-duration: 0.5s, 0.5s, 0s;
    transition-property: opacity, transform, visibility;
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    visibility: hidden;
}

.dropdown-menu {
    background-clip: padding-box;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
    display: none;
    float: left;
    font-size: 14px;
    left: 0;
    list-style: outside none none;
    margin: 2px 0 0;
    min-width: 160px;
    padding: 5px 0;
    position: absolute;
    top: 100%;
    z-index: 1000;
}
.open > .dropdown-menu-animated {
    visibility: visible;
    opacity: 1;
    transition: opacity .5s, -webkit-transform .5s;
    transition: opacity .5s, transform .5s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
}

我的 HTML：

<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse right">
    <ul class="nav navbar-nav navbar-left">
        <li class="dropdown">
            <a class=" dropdown-toggle" href="#_" data-toggle="dropdown">
                            HOVER ME
            </a>
            <ul class="dropdown-menu dropdown-menu-animated" role="menu">
                <li>
                    <a href="/points">Sushi Points</a>
                </li>
                <li><a href="/points">Two</a></li>
            </ul>
        </li>
    </ul>
</div>

---

感谢@chiller。

更新和编辑的答案：

JS

$('.dropdown-toggle').hover(function() {
    $(this).parent().addClass("open");
});

$('.dropdown').mouseleave(function() {
    $(this).removeClass("open");
});

CSS

.dropdown-menu li a {
    color: white;
}
.dropdown-menu-animated {
    border: 0 none;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
    display: block;
    margin-top: 0;
    opacity: 0;
    transform: scale3d(0.95, 0.95, 1) translate3d(0px, -15px, 0px);
    transform-origin: 100% 0 0;
    transition-delay: 0s, 0s, 0.5s;
    transition-duration: 0.5s, 0.5s, 0s;
    transition-property: opacity, transform, visibility;
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    visibility: hidden;
}
.dropdown-menu {
    background-clip: padding-box;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
    /*display: none;*/
    float: left;
    font-size: 14px;
    left: 0;
    list-style: outside none none;
    margin: 2px 0 0;
    min-width: 160px;
    padding: 5px 0;
    position: absolute;
    top: 100%;
    z-index: 1000;
}
.open > .dropdown-menu-animated {
    visibility: visible;
    opacity: 1;
    transition: opacity .5s, -webkit-transform .5s;
    transition: opacity .5s, transform .5s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
}

HTML

<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse right">
    <ul class="nav navbar-nav navbar-left">
        <li class="dropdown">
            <a class="dropdown-toggle" href="#_" data-toggle="dropdown">
                            HOVER ME
            </a>
          <ul class="dropdown-menu dropdown-menu-animated" role="menu" style="color:white;background:black;">
                <li><a href="#">Bulanching</a></li>
                <li><a href="#">Kuya Matmat</a></li>
                <li><a href="#">Baby</a></li>
                <li><a href="#">Wedding</a></li>
                <li><a href="#">Excited</a></li>
            </ul>
        </li>
    </ul>
</div>

Answer 1

这实际上是用 JavaScript 完成的，你所要做的就是在你的脚本中添加这个 jquery 代码

$('.dropdown-toggle').hover(function() {
  $(this).parent().addClass("open");
});

$('.dropdown').mouseleave(function() {
  $(this).removeClass("open");
});

你必须删除 display: none;从类 .dropdown-menu 中让动画工作

see your example here

您也可以通过添加以下代码使其与 CSS 一起工作：

.dropdown:hover>.dropdown-menu-animated{

    visibility: visible;
    opacity: 1;
    transition: opacity .5s, -webkit-transform .5s;
    transition: opacity .5s, transform .5s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);

} 

See your example with CSS only

Answer 2

以下 sn-p 解决了 :hover 外观的样式问题。 在.dropdown .dropdown-menu-animated 规则中添加您的过渡效果，然后就可以了；）

.dropdown {
    float: left;
    cursor: pointer;
}
.dropdown .dropdown-menu-animated {
    border: 0 none;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
    margin-top: 20px;
    transform: scale3d(0.95, 0.95, 1) translate3d(0px, -15px, 0px);
    transform-origin: 100% 0 0;
    transition-delay: 0s, 0s, 0.5s;
    transition-duration: 0.5s, 0.5s, 0s;
    transition-property: opacity, transform, visibility;
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    visibility: hidden;
}

.dropdown:hover .dropdown-menu-animated {
    visibility: visible;
}

<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse right">
    <ul class="nav navbar-nav navbar-left">
        <li class="dropdown">
            HOVER ME

            <ul class="dropdown-menu-animated" role="menu">
                <li>
                    <a href="/points">Sushi Points</a>
                </li>
                <li><a href="/points">Two</a></li>
            </ul>            
        </li>
    </ul>
</div>