如何对打开购物车下拉菜单进行动画处理

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;
}

我是 usign 版本 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%;
}

注意：不要编辑引导程序文件，请在主题样式表的末尾添加上述代码：stylesheet.css