Question

所以，我正在使用opencart开发我的电子商务，我想让下拉菜单显示一个简单的动画。问题是我应用了转换，但它不起作用。代码部分就是这个

.navbar-nav > li > .dropdown-menu {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
}

我是版本2.2

Answer 1

由于.dropdown-menu在引导程序中具有display:none样式，因此您无法使用纯css为其设置动画而不会覆盖，您可以通过以下方式设置动画：

.navbar-nav > li > .dropdown-menu {
    display: block; /* Override the bootstrap display: none */
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.3s ease;
    -webkit-transition: opacity 0.3s ease;
    visibility: hidden;
}
#menu .dropdown:hover .dropdown-menu {
    height: auto;
    opacity: 1;
    visibility: visible;
}

另一个例子：

.navbar-nav > li > .dropdown-menu {
    display: block; /* Override the bootstrap display: none */
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    visibility: hidden;
    top: 200%;
}
#menu .dropdown:hover .dropdown-menu {
    height: auto;
    opacity: 1;
    visibility: visible;
    top: 100%;
}

注意：不要编辑bootstrap文件，在主题样式表的末尾添加上面的代码：stylesheet.css

如何为opencart下拉菜单设置动画

1 个答案: