高度调整过渡不起作用

Question

我有一个名为innerMenu的div类，我希望它在鼠标悬停时过渡到更高的高度。我的部分代码可以工作，在以下jsfiddle中可以观察到：

https://jsfiddle.net/6ko9mc1u/1/

然而，尽管添加了所有过渡选项。对于这类div，转换效果不会发生。

我花了几个小时试图修复它，禁用了代码的几个部分，但我无法使它工作。

Answer 1

.innerMenu未定义明确的初始高度，因此其值为auto，但您无法转换auto值{。}}。

Answer 2

您需要在.innerMenu元素上设置显式高度，因为转换需要应用实际值（即非自动或默认值）：

.innerMenu {
  /* Example of initial height */
  height: 10px;
  border: thin solid green;
}

作为一个注释，您可能还需要考虑向元素添加转换，以确保在元素悬停和关闭时应用动画。

示例

.menu {
  width: 150px;
  height: 200px;
  border: thin solid red;
}
.innerMenu {
  height: 10px;
  border: thin solid green;
  transition: 2s;
  -webkit-transition: 2s;
  -moz-transition: 2s;
  -o-transition: 2s;
  -ms-transition: 2s;
}
div.menu:hover {
  width: 300px;
  transition: 2s;
  -webkit-transition: 2s;
  -moz-transition: 2s;
  -o-transition: 2s;
  -ms-transition: 2s;
}
div.innerMenu:hover {
  height: 60px;
  transition: 2s;
  -webkit-transition: 2s;
  -moz-transition: 2s;
  -o-transition: 2s;
  -ms-transition: 2s;
}

<div class="menu">
  <div class="innerMenu"></div>
  <div class="innerMenu"></div>
</div>