Css 获取引导子AV以设置动画

我想弄清楚我在这里遗漏了什么。我试着在Boostrap导航上复制的下拉行为

我所拥有的是

.nav > li.menu-item-has-children ul.dropdown-menu {
    opacity: 0;
    -o-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -moz-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    -o-transition: -o-transform 0.4s, opacity 0.4s;
    -ms-transition: -ms-transform 0.4s, opacity 0.4s;
    -moz-transition: -moz-transform 0.4s, opacity 0.4s;
    -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
}
.nav > li.menu-item-has-children:hover ul.dropdown-menu {
    opacity: 1;
    margin-top: 0;
    -o-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
}

---

而且它不起作用。

这应该可以解决问题

@导入url（“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");
/*请不要用手机*/
@介质（最小宽度：768px）{
li.dropdown.scale>。下拉菜单{
显示：块；
不透明度：0；
-o变换：标度（0）；
-ms变换：尺度（0）；
-moz变换：比例（0）；
-webkit变换：缩放（0）；
-o-变换原点：0%0%；
-ms变换原点：0%0%；
-moz变换原点：0%0%；
-webkit转换源：0%0%；
-o-变换：-o-变换0.4s，不透明度0.4s；
-ms变换：-ms变换0.4s，不透明度0.4s；
-莫兹变换：-莫兹变换0.4s，不透明度0.4s；
-webkit转换：-webkit转换0.4s，不透明度0.4s；
}
li.下拉.缩放：悬停>.下拉菜单{
不透明度：1；
-o变换：标度（1,1）；
-ms变换：比例（1,1）；
-moz变换：比例（1,1）；
-webkit变换：比例（1,1）；
}
li.下拉列表。缩放：悬停{
背景色：#e7e7e7；
}
}

切换导航







导航标题

因为引导将

下拉菜单设置为
显示：无默认情况下，您需要使用
display:block！重要的。改为添加
opacity
，并将过渡添加到引导默认类

.dropdown-menu {
    display: block !important; /* this is needed to override the default display: none; defined in bootstrap. */
    opacity: 0;
    -o-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    -o-transition: -o-transform 0.4s, opacity 0.4s;
    -ms-transition: -ms-transform 0.4s, opacity 0.4s;
    -moz-transition: -moz-transform 0.4s, opacity 0.4s;
    -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
}
.dropdown > .dropdown-menu {
    -o-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -moz-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    opacity: 0;
}
.open > .dropdown-menu {
    opacity: 1;
    -o-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
}

这里有一个类似导航效果的工作小提琴
 如果你能在上面复制你的代码，这样我们可以帮助你更快，那就太好了：）你有没有包括引导？如果没有更多的细节，我们无法知道发生了什么？另外，提到的代码复制@BastianW也很不错。