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

Question

我有一个HTML菜单元素，我目前使用javascript和CSS动画。 菜单的max-height设置为0，overflow：hidden。

<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中，我在单击按钮时更改菜单max-height。

这一切都很好，除了我想从底部到顶部显示菜单，而不是自上而下。 这可以在简单的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 ，因为它可以更容易地获得你想要的尺寸，但是最大高度通常也能正常工作。

优点：内容不规模
缺点：需要定位和一些固定高度的声明

什么都适合你。

 .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;将它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>