高度动画在 CSS 示例中不起作用

Question

有人知道为什么高度动画在此示例中不起作用并导致动画出现此 "jump" 吗？

transition: height .5s;

谢谢，尼克

Answer 1

我找到了解决办法！我从这个切换

transition: height .5s;
transition: margin .5s;
transition: transform .5s;

对此（我添加了一些动画，但它们无关）

transition: height .25s, margin .25s, transform .25s, background .25s, color .25s;

这解决了问题！如果有人知道为什么，我很想知道。

这是更新后的示例。

谢谢

Answer 2

一个过渡抵消了另一个，另一个，你需要这样做：

.box {
   transition: height .5s, margin .5s, transform .5s;
}

不是这样的：

.box {
   transition: height .5s;
   transition: margin .5s;
   transition: transform .5s;
}

height animation is not working in CSS sample