过渡高度不起作用

Question

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

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

p:hover {
  width: 300px; 
  height 500px;
}

Answer 1

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

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's answer 中所述，如果您只想转换height 和width（而不是任何其他属性的值更改），请不要使用all 方法。

Answer 3

如果您确定只想为 height 和 width 属性而不是所有 CSS 属性设置动画，您也可以这样做：

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

您当前的 CSS 代码仅指示浏览器为宽度设置动画。