自举CSS过渡
自举CSS过渡
提问于 2016-11-20 12:27:21
嗨，我试图复制devdojo.com (https://devdojo.com/ebook/laravelsurvivalguide)漂亮的CSS转换下拉菜单，但无法复制它。这是三个点在主菜单上的悬停。也许我漏掉了什么？谢谢!
我的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);
}<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>回答 2
Stack Overflow用户
回答已采纳
发布于 2016-11-20 13:57:07
这实际上是用JavaScript完成的，您所要做的就是在脚本中添加jquery代码。
$('.dropdown-toggle').hover(function() {
$(this).parent().addClass("open");
});
$('.dropdown').mouseleave(function() {
$(this).removeClass("open");
});您必须从类.下拉菜单中移除显示: none；才能使动画工作
参见这里的例子
仅通过添加以下代码，还可以使它与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);
} 请参见只使用CSS的示例
Stack Overflow用户
发布于 2016-11-20 13:24:03
下面的片段解决了: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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40704000
复制相关文章
相似问题
腾讯云开发者
