过渡高度不起作用

Question

我正在尝试创建一个简单的CSS transition来更改方框的height和width。width似乎随着动画而变化，但height不会动画化。我该如何解决这个问题？或者我在这里做错了什么？

p {
  width: 100px; 
  height: 200px; 
  transition: width 3s;
}
p:hover {
  width: 300px; 
  height 500px;
}

Answer 1

如果您确定只想对 height 和 width 属性进行动画处理，而不是对所有 CSS 属性进行动画处理，也可以执行以下操作：

p:hover {
  height: 300px;
  width: 500px;
  transition: height, width linear 3s;
}

您当前的 CSS 代码仅指示浏览器对宽度进行动画处理。

Answer 2

要同时transition width和height，您必须更改过渡设置，如下所示：

p {width: 100px; height: 200px; transition: all 3s;}

您的代码在 p:hover 中的 height 属性设置中也缺少:。

p:hover {
  width: 300px; 
  height: 500px; /* added missing : */
}

p {
  display: block;
  border: 1px solid black;
}
p {
  width: 100px;
  height: 200px;
  transition: all 3s;
}
p:hover {
  width: 300px;
  height: 500px;  /* added missing : */
}

<p>abcd</p>

正如 godfrzero 的回答中提到的，如果您只想转换height和width(而不是任何其他属性的值更改(，请不要使用 all 方法。

Answer 3

如果你真的想保持高度在自动，我发现使用 最大高度：自动;对于元素的结束状态和 最大高度：0px初始属性(或开头的任何内容(保留过渡和自动调整高度大小。