0

我试图让一个 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/获得

4

1 回答 1

3

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

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

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

演示   （仅针对 Webkit 浏览器）

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() );
});
于 2013-03-25T17:00:46.527 回答