如何動畫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; 
} 

我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