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

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 在 bootstrap 中有 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下拉菜单设置动画

How to animate opencart dropdown menu

css

drop-down-menu

opencart

dropdown

opencart2.x