html - 使用 CSS 动画对 div 高度进行动画处理时出现问题

Question

我试图让一个 div 在加载时进行动画处理，从 0px 高缩放到它的全高。这是我目前拥有的相关 CSS，现在正在 Chrome 中开发，所以我只有 -webkit 前缀:

#teaserbar {
  width: 100%;
  overflow: hidden;
  background-color: #333;
  -webkit-animation-name: barAppear;
  -webkit-animation-duration: 3s;
}

@-webkit-keyframes barAppear {
  from {
    height: 0;
  }
  to {
    height: auto;
  }
}

以及相关的 HTML:

<div id="teaserbar">
  <div class="container">
    <div class="sixteen columns clearfix">
      <p><a href="#jumper">Lorem ipsum dolor sit amet! &#8681;</a></p>
    </div>
  </div>
</div>

我在让动画真正起作用方面收效甚微——起初我认为像这样缩放高度可能是个问题，但我也没有成功地为 div 的背景颜色设置动画。如果有人认为这可能有助于解决我的问题，我可以提供完整的匿名来源。

有什么建议吗？我觉得我一定遗漏了一些相当明显的东西，因为我过去曾让 CSS 动画正常工作。

编辑:根据 Mr_Green 的建议制作了一个 fiddle ，可在 http://jsfiddle.net/XYfE9/ 获得

Answer 1

正如其他人在评论中指出的那样，CSS 动画似乎不支持使用 auto 的高度值，一种解决方案是改用固定高度。

如果您需要支持动态高度，您可以使用 jQuery 测量高度，然后将测量的高度应用于动画。

一种可能的方法是在 #teaserbar 周围添加一个容器。将容器设置为测量高度，并为动画使用 0% 和 100% 的开始和结束值。对于固定高度容器中的元素，使用 0% 和 100% 的快速测试是成功的。不确定此解决方案是否会出现页面布局问题，但可能有其他方法可以使用不会这样做的测量高度。

演示(仅针对 Webkit 浏览器)

• > Fixed-height container (没有 jQuery)
• > Dynamic-height container (使用 jQuery)

HTML

<div id="container">
    <div id="teaserbar">
        <p><a href="#jumper">Lorem ipsum dolor sit amet! &#8681;</a></p>
    </div>
</div>

CSS

@-webkit-keyframes barAppear {
    from {
        height: 0%
    }
    to {
        height: 100%;
    }
}

jQuery

$(document).ready(function(){
    $('#container').height( $('#teaserbar').height() );
});