如何从底部到顶部为元素的最大高度设置动画？

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>

Answer 2

迈克尔已经提供了一个非常优雅的解决方案，但它存在缩放所有内容的问题。

我只是想提供另一种方法：使用时position:absolute，可以设置bottom:0从底部显示。我height在演示中使用了它，因为它更容易获得您想要的尺寸，但 max-height 通常也可以正常工作。

优点：内容无法缩放
缺点：需要定位和一些固定高度声明

无论什么最适合你。

.menu {
    background:#bada55;
    transition: all 0.4s ease;
    height:0;
    overflow:hidden;
    position:absolute;
    bottom:0;
    width:100%;
}
.container:hover .menu {
    height:30px;
}
.container{
  position:relative;
  border:1px solid red;
  height:30px;
}

<div class="container">

  <div class="menu">
  Menu content
  </div>
</div>

另一种可能性是简单地为定位设置动画。这里只需操纵top即可实现滑动效果。

.menu {
  background: #bada55;
  transition: all 0.4s ease;
  overflow: hidden;
  position: relative;
  width: 100%;
  padding:10px;
  height:40px;
  box-sizing:border-box;
  top:100%;
}

.container:hover .menu {
  top:0;
}

.container {
  border: 1px solid red;
  overflow:hidden;
  height:40px;
}

<div class="container">

  <div class="menu">
    Menu content
  </div>
  
</div>