CSS 3 奇怪的动画延迟答案

【问题标题】：CSS 3 weird animation delayCSS 3 奇怪的动画延迟
【发布时间】：2014-07-07 09:38:57
【问题描述】：

我正在尝试创建 CSS3 滑动动画。 slideDown 部分有效，但向上部分似乎没有立即触发，我不知道为什么。

   .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/

我该如何解决这个问题？

【问题讨论】：

标签： css css-animations keyframe

【解决方案1】：

slideUp 动画立即触发，您只是看不到动画的前 940px，因为您的 <ul class="slidable"> 只有 60px 高。

所以现在我们知道这里发生了什么，接下来就是如何解决它：

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 */
    }
}

或者，如果您愿意，可以缩短整个内容并使用 .slideUp(); 和 .slideDown();

Working Example 2

【讨论】：

感谢您的回答，这带来的唯一问题是我不知道 ul 中会有多少个 li 元素，所以我不知道编译时的确切高度。使用 jQuery 会降低性能吗？ CSS3 更擅长这样的事情，对吧？
@user1613512 通常 css 动画会更流畅一些，但它们仍然存在支持问题。如果您已经在使用 jQuery 作为按钮，使用 slideUp/slideDown 应该不是问题。
@user1613512 如果您知道 li 元素的高度，但不知道 li 元素的数量，您可以像这样将动画附加到 li 而不是 ul：jsfiddle.net/5E7YQ/6