3

我希望我的块元素看起来好像高度增长到最大值（如JQuery 的渐进式显示），随着它的增长，垂直“推动”它之后的任何元素。

height使用固定（max-height从 0 到想要的大小）很容易，但不是用height: auto，因为你不能max-height从 0 到none（元素将一直是 0px 高然后突然出现在动画的 100% 处）。

我尝试过从transformtoscaley(0)但scaley(1)高度从过渡开始时自动“保留”（因此插入元素后的内容被粗暴地向下移动，而不是平滑、渐进地推动）。

4

5 回答 5

6

您可以在任何内容之前使用“推动者”元素（或伪元素）。

<div class="container open">
    <div class="pusher"></div>
    ... the rest of the unknown height content
</div>

然后过渡推动者的边距。

.container { overflow:hidden }
.pusher { margin-top:-100%; transition:margin-top .5s ease; }
.open .pusher { margin-top:0%; }
于 2012-09-26T23:13:43.460 回答
1

解决方案是单独转换所有应该移动的元素（也就是在元素之后的内容中添加另一个转换）。通常，您不能依靠转换的自动回流。

于 2011-02-03T23:30:04.253 回答
0

迈克尔是对的，任何应用“自动”值的东西都不会干净地制作动画。您必须设置定义的高度。我在这里对 Duopixel 的 jsfiddle 做了一些更改：http: //jsfiddle.net/joshvogt/vjXuH/

如果你想让每个元素的高度都完美，你必须对每个元素应用类并为每个元素指定一个高度。链接设置最大元素的高度。

于 2011-02-06T14:36:37.030 回答
0

Responsive Nav使用了另一种技术，它使用 JavaScript 计算目标高度，然后创建max-height从 0 到结果值的过渡。

代码在这里。

于 2013-04-09T11:59:39.303 回答
0

似乎最好的模拟解决方案height: auto;可能是动画max-height。我已经更新了 DuMaurier 的小提琴，它似乎正在工作：http: //jsfiddle.net/8JLKA/1/

我从max-height设置为默认值开始，然后将其转换:hover为比盒子需要的更大的东西，500px. 这是我第一次搞乱 CSS 过渡，所以我可能遗漏了一些重要的东西。

更新：好的，我要离开这个，但这主要是个坏主意。问题是过渡时间与等的完整值相关联max-height，除非内容的实际高度非常接近动画的值，否则max-height动画看起来会发生得太快。奇怪的是，当从高位移开时max-height，过渡需要预期的时间。不知道为什么会这样。此外，缓动也不会正确显示。

于 2012-01-17T17:57:20.330 回答