Question

CSS3动画存在问题。它们不支持“自动”高度属性（以及宽度，边距等）。在不知道元素的确切高度的情况下创建CSS3向下滑动动画的最佳方法是什么？

这个问题类似于this，但是那里接受的答案并没有回答实际问题，因为它们没有解决计算你想要滑动的元素高度的问题。

Answer 1

你看过这个演示我挖出了答案吗？ http://jsfiddle.net/XUjAH/6/

我尝试自己编写，但似乎没有用。

Answer 2

您可以通过复制它来知道元素的高度，将其高度设置为“auto”并询问它的高度（以像素为单位）。

假设这是你要设置动画的div：<div id="mydiv" style="height:0px">，使用此代码计算出它的高度（仅为了简单起见使用jQuery）：

var divHeight = $("#mydiv").clone().css("height", "auto").height();

Answer 3

我正在使用它：

.slide-down {
  transition: max-height .3s ease-out, opacity .3s ease-out, margin .3s ease-out;
  overflow: hidden;
  max-height: 100px; 

  &.collapsed {
    max-height: 0;
    opacity: 0;
    margin: 0;
  }
}

如果使用LESS或Sass，您可能希望在效果持续时间和缓和中使用变量。
要触发效果，使用$('.slide-down').toggleClass('collapsed')。
如果容器的100px太小，请设置不同的最大高度在元素中使用额外的CSS类。
如果你觉得很花哨，尝试使用cubic-bezier(0.17, 0.04, 0.03, 0.94)代替 ease-out。

Answer 4

检查一下：http://jsfiddle.net/gion_13/eNR6Q/ 这只是css3动画。在其他浏览器中使用更改/添加浏览器特定的供应商css前缀：“-moz”表示firefox，“ - webkit”表示chrome＆amp; safari，“ - o”表示opera，“ - ms”表示ie

如何实现像jQuery的slideDown一样的滑动效果，但只使用CSS？

4 个答案: