Ste*_* Lu 5 html javascript css css3 css-transitions
我正在切换div的内容(将旧内容淡出,然后淡出新内容),因为它们的内容略有不同,所以当它们发生变化时,对它们下面的一切都进行了一次不和谐的重组.
我的问题是,有没有办法让这个运动顺利进行？
我怀疑几乎唯一可行的方法是使用javascript提前确定起始和结束元素的高度(在我的情况下我只处理垂直对齐移位的块)是什么,并分配这些值直接.一旦我这样做,我相信CSS3过渡将应用一个愉快的动画.
有没有办法在没有指定明确尺寸的情况下获得这个？我似乎记得在某些时候,经验丰富的项目以动画的方式在页面上移动.这让我希望只使用CSS就可以完成.
我通常会创建一个临时（不可见）元素来保存新内容，以便计算其高度。之后，原始元素可以从当前高度动画到新计算的高度。
重要的是，创建的临时元素是原始元素的相同同级元素，以便所有必要的样式级联并正确继承（例如，如果没有正确font-size应用，计算新的内容高度是没有用的）
虽然显式设置的不同高度之间的动画（即如上所述使用 JS）可以使用 CSS3 ( transition: height .5s ease;) 来完成，但它不适用于隐式设置的不同高度（即使用 修改元素内容height:auto）