css關鍵幀動態高度動畫

Question

你好，我有我的子菜單下面的css。它是用來打開它們，當頁面加載。它很好，但我注意到，如果在最後狀態動畫我設置height:auto;然後動畫沒有被執行。這對我來說是一個問題，因爲在我的網站中，我有很多子菜單中有n個孩子，所以我必須動態地填充子菜單的高度。可能嗎 ？

@-moz-keyframes slidemenu { 
     0% { 
      height: 0px; 
     } 
     100% { 
      height: 90px; 
     } 
    } 

    @-webkit-keyframes slidemenu { 
     0% { 
      height: 0px; 
     } 
     100% { 
      height: 90px; 
     } 
    } 

    #side-menu > li.active > ul.sub-menu{ 
     -moz-animation-delay:0.5s; 
     -moz-animation-name: slidemenu; 
     -moz-animation-timing-function: ease-out; 
     -moz-animation-duration: 0.5s; 
     -moz-animation-iteration-count: 1; 
     -moz-animation-fill-mode: forwards; 

     -webkit-animation-delay:0.5s; 
     -webkit-animation-name: slidemenu; 
     -webkit-animation-timing-function: ease-out; 
     -webkit-animation-duration: 0.5s; 
     -webkit-animation-iteration-count: 1; 
     -webkit-animation-fill-mode: forwards; 
    } 

PS：我對純粹的css解決方案感興趣。

Answer 1

而是動畫height，儘量動畫transform: translateY()如下（你會得到一個真正的滑動效果）：

@keyframes slideDown{ 
    from { 
    transform: translateY(-100%); 
    opacity: 0; 
    } 
    to { 
    transform: translateY(0); 
    opacity: 1; 
    } 
}