5

我正在切换 div 的内容（淡出旧内容，然后淡入新内容），因为它们的内容略有不同，所以当它们发生变化时，它们下面的所有内容都会发生不和谐的重组。

我的问题是，有没有办法让这个动作顺利进行？

我怀疑几乎唯一可行的方法是使用javascript提前确定起始和结束元素的高度（在我的情况下我只处理垂直对齐移动的块），并分配这些直接取值。一旦我这样做了，我确信 CSS3 过渡将应用一个令人愉快的动画。

有没有办法在不指定明确尺寸的情况下得到这个？我似乎记得在某些时候有经验的项目以动画方式在页面上移动。这让我希望它可以只使用 CSS 来完成。

4

1 回答 1

2

我通常会创建一个临时（不可见）元素来保存新内容，以便计算它的高度。之后，原始元素可以从其当前高度动画到新计算的高度。

重要的是，创建的临时元素是原始元素的同级元素，以便所有必要的样式级联并正确继承（例如，如果没有正确font-size应用，计算新的内容高度是无用的）

虽然可以使用 CSS3 ( ) 来实现显式设置的不同高度之间的动画（即使用上述 JS transition: height .5s ease;），但它不适用于隐式设置的不同高度（即使用 修改元素内容height:auto）

于 2012-07-15T01:27:47.853 回答