使用 CSS 动画制作 div 高度的问题答案

【问题标题】：Trouble animating div height using CSS animation使用 CSS 动画制作 div 高度的问题
【发布时间】：2013-03-15 06:12:33
【问题描述】：

我正在尝试让一个 div 在加载时进行动画处理，从 0px 高缩放到其全高。这是我目前在 Chrome 中开发的相关 CSS，所以我只有 -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 的建议做了一个小提琴，可在 http://jsfiddle.net/XYfE9/

【问题讨论】：

有点无关紧要：-webkit 不再是必需的。所有 Chromium 浏览器都完全实现了 CSS3。
谢谢@Mr_Green，在底部添加了指向小提琴的链接。
好点，@cygorx； -webkit 对于旧版本仍然是必需的，但对于我的测试而言确实不需要。
我不经常使用 CSS3 动画，但您似乎无法将动画设置为“自动”，使用固定高度，它应该可以工作。
这似乎是问题所在，@Simon——不知道之前出了什么问题，但我现在可以使用固定高度的动画。我认为 webkit 已经（违反规范）实现了 auto 作为动画的选项，但事实并非如此。我唯一担心的是 div 的高度可能会根据浏览器的宽度而有所不同，但我想这是 Javascript 的工作。

标签： html css css-animations

【解决方案1】：

正如其他人在 cmets 中指出的那样，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() );
});

【讨论】：