CSS 3奇怪的動畫延遲

我想創建一個CSS3滑動動畫。 slideDown部分工作，但上升部分似乎不會立即觸發，我不知道爲什麼。CSS 3奇怪的動畫延遲

.slideUp{ 
     -webkit-animation:slideUpFrames 1s; 
     -webkit-animation-fill-mode: forwards; 
    } 

    @-webkit-keyframes slideUpFrames{ 
     0%{ 
     max-height:1000px; 
     } 

     100%{ 
     max-height:0px; 
     } 
    } 

    .slideDown{ 
      -webkit-animation:slideDownFrames 1s; 
      -webkit-animation-fill-mode: forwards; 
    } 

    .slidable{ 
     overflow: hidden; 
    } 

    @-webkit-keyframes slideDownFrames{ 
     0%{ 
     max-height: 0px; 
     } 

     100%{ 
     max-height:1000px; 
     } 
    }

我創建了一個小提琴（WebKit的只）：http://jsfiddle.net/5E7YQ/

我怎麼能解決這個問題？

來源

2014-07-03 user1613512

slideUp動畫立即觸發，因爲<ul class="slidable">只有60px高，所以無法看到動畫的第一個940像素。

Working Example

.slideUp { 
    -webkit-animation:slideUpFrames .5s; /* shorten time */ 
    -webkit-animation-fill-mode: forwards; 
} 
@-webkit-keyframes slideUpFrames { 
    0% { 
     max-height:60px; /* change 1000px to the height of the element */ 
    } 
    100% { 
     max-height:0px; 
    } 
} 
.slideDown { 
    -webkit-animation:slideDownFrames .5s; /* shorten time */ 
    -webkit-animation-fill-mode: forwards; 
} 
.slidable { 
    overflow: hidden; 
} 
@-webkit-keyframes slideDownFrames { 
    0% { 
     max-height: 0px; 
    } 
    100% { 
     max-height:60px; /* change 1000px to the height of the element */ 
    } 
}

或者，如果你願意，你可以縮短整個事情：

enter image description here

所以，現在我們知道了是怎麼回事就是怎麼能固定

使用.slideUp();和.slideDown();

Working Example 2

來源

2014-07-07 01:38:57 apaul

感謝您的回答，這帶來的唯一問題是我不知道在ul中會有多少個li元素，所以我不知道編譯時的確切高度。使用jQuery會降低性能嗎？ CSS3更適合這樣的東西嗎？ – user1613512

@ user1613512通常css動畫往往會稍微平滑一些，但它們仍然有支持問題。如果你已經使用jQuery作爲按鈕使用slideUp/slideDown應該不成問題。 – apaul

@ user1613512如果你知道你的li元素的高度，但不知道有多少li元素，你可以將動畫附加到li的而不是像這樣的ul：http://jsfiddle.net/5E7YQ/6/ – apaul

CSS 3奇怪的動畫延遲

回答

相關問題