Javascript 如何设置元素动画'；从底部到顶部的最大高度是多少？

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

<div class="menu">

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

---

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

您可以转换

scaleY（）

，并使用

转换原点

div{
变换原点：0.100%；
宽度：100px；
高度：100px；
背景：黑色；
转变：转变；
变换：scaleY（0）；
}
主体：悬停div{
变换：scaleY（1）；
}

您可以使用。您需要使用

align items:flex-end


var btn=document.querySelector（'button'）；
btn.addEventListener（'click'，function（）{
document.querySelector（'.menu'）.classList.toggle（'active'）；
});
菜单{
最大高度：0；
溢出：隐藏；
-webkit过渡：最大高度1s；
-moz过渡：最大高度1s；
过渡：最大高度1s；
背景：#eee；
显示器：flex；
对齐项目：柔性端；
}
.menu.active{
最大高度：300px；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
宽度：100%；
}
ulli{
}
切换菜单

项目1
项目2
项目3
项目4（最后一项）

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

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

优点：内容不可扩展

缺点：需要定位和一些固定高度声明

什么对你最合适


菜单{
背景：#bada55；
过渡：所有0.4s缓解；
身高：0；
溢出：隐藏；
位置：绝对位置；
底部：0；
宽度：100%；
}
.container:hover.menu{
高度：30px；
}
.集装箱{
位置：相对位置；
边框：1px纯红；
高度：30px；
}

菜单内容
非常优雅的解决方案！爱死它了！请注意，
scaleY（）
将扭曲文本。菜单将显示为挤压而不是滑动。@JosephMarikle如果你的意思是“缩放”，那么是的。然而，它解决了问题，而你的解决方案并不完全是我无意冒犯的。我的解决方案将问题解释为内容在滑动时粘在容器顶部或底部。我一点也不确定那是OP的意图。我只知道这是一个菜单，所以我想我应该指出，如果你缩放容器而不是利用溢出隐藏内容，文本可能看起来很奇怪。@JosephMarikle我的评论很严厉，我很抱歉！是的，这是一个有效点，字体也会缩放！但我认为这是三种解决方案中最灵活的一种。你的不考虑从下到上的部分，而我的工作定位和高度也有点不灵活。除非我误解了这个问题，否则我认为你的解决方案不能解决问题；）@克里斯托夫：我完全同意。我觉得现在的三个答案对OP的意思有不同的理解。
.menu {
    -webkit-transition: max-height 0.4s ease;
    -moz-transition: max-height 0.4s ease;
    transition: max-height 0.4s ease;
}