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奇怪的动画延迟

回答

相关问题