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;}，您必须更改过渡设置，如下所示：

您的代码在height内的p: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>

height

正如godfrzero's answer中所述，如果您只想转换width和all（但不是任何其他属性的值更改），请不要使用{{1}}方法。

Answer 3

如果确实希望将高度保持在auto状态，我发现使用了 max-height：auto; 对于元素的结束状态和 max-height：0px （或者你开始的任何东西）初始属性保持过渡和自动高度大小。

过渡高度不起作用

3 个答案: