javascript - 如何从下到上为元素的最大高度设置动画？

Question

我有一个 HTML 菜单元素，我目前正在使用 javascript 和 CSS 制作动画。菜单的最大高度设置为 0，溢出:隐藏。

<div class="menu">

当前的CSS动画:

.menu {
    -webkit-transition: max-height 0.4s ease;
    -moz-transition: max-height 0.4s ease;
    transition: max-height 0.4s ease;
}

在 javascript 中，我在单击按钮时更改菜单最大高度。

这一切都很好，除了我想从底部到顶部而不是从上到下显示菜单。这可以用简单的 CSS 或 JS 完成吗？

Answer 1

您可以转而使用 scaleY()，并使用 transform-origin

div {
  transform-origin: 0 100%;
  width: 100px;
  height: 100px;
  background: black;
  transition: transform .5s;
  transform: scaleY(0);
}
body:hover div {
  transform: scaleY(1);
}

<div></div>