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的建议制作了一个小提琴，可在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() );
});

使用CSS动画麻烦动画div高度

1 个答案: