Bootstrap CSS轉換onhover

Question

嗨我試圖複製devdojo.com（https://devdojo.com/ebook/laravelsurvivalguide）onhover美麗的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菜單的動畫工作

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

下面的代碼片段解決了: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>