直接修改 height 属性 css动画不生效

如果你直接修改了元素的 `height` 属性，而没有通过 CSS 动画来改变元素高度，那么 CSS 动画就不会生效。

要让 CSS 动画生效，你可以使用 CSS3 的 `transition` 属性。例如：

.box {
  height: 100px;
  transition: height 0.3s ease-in-out;
}

.box:hover {
  height: 200px;
}

上面的 CSS 代码中，当鼠标悬停在 `.box` 元素上时，它的高度从 100px 过渡到 200px，过渡时间为 0.3 秒，过渡效果为缓入缓出。

如果你需要通过 JavaScript 来修改元素的高度，并且希望使用 CSS 动画来实现过渡效果，可以使用 `classList` 属性和 `setTimeout` 函数来添加和移除 CSS 类名。例如：

<div class="box"></div>
<button onclick="expandBox()">展开</button>

<style>
  .box {
    height: 100px;
    transition: height 0.3s ease-in-out;
  }
  .box.expanded {
    height: 200px;
  }
</style>

<script>
  function expandBox() {
    var box = document.querySelector(".box");
    box.classList.add("expanded");
    setTimeout(function() {
      box.classList.remove("expanded");
    }, 300);
  }
</script>

上面的代码中，当点击按钮时，将 `.box` 元素的高度从 100px 过渡到 200px，过渡效果为缓入缓出。`expandBox` 函数先添加 `.expanded` 类名，然后在 300 毫秒后移除该类名，以触发 CSS 动画。