html - 过渡高度不起作用

Question

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

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

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

Answer 1

如果您确定只想为heightandwidth属性而不是所有 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;}

您的代码:在.heightp:hover

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

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