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

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

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

我只是想提供另一种方法：使用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>

Answer 3

您可以使用flexbox。您需要使用 align-items: flex-end; 将其与底部对齐。

var btn = document.querySelector('button');

btn.addEventListener('click', function(){
  document.querySelector('.menu').classList.toggle('active');
});

.menu {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 1s ease;
  -moz-transition: max-height 1s ease;
  transition: max-height 1s ease;
  
  background: #eee;
  display: flex;
  align-items: flex-end;
}

.menu.active {
  max-height: 300px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

ul li {
  
}

<button>Toggle Menu</button>

<div class="menu">
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4 (last item)</li>
  </ul>
</div>

作为参考，这里是菜单在没有 flexbox 对齐的情况下是如何工作的：

var btn = document.querySelector('button');

btn.addEventListener('click', function(){
  document.querySelector('.menu').classList.toggle('active');
});

.menu {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 1s ease;
  -moz-transition: max-height 1s ease;
  transition: max-height 1s ease;
  
  background: #eee;
}

.menu.active {
  max-height: 300px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul li {
  
}

<button>Toggle Menu</button>

<div class="menu">
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4 (last item)</li>
  </ul>
</div>