Javascript 我如何设置动画？

好的，我为我的网站制作了一个简单的汉堡包下拉菜单。我将其设置为显示无，然后单击切换按钮添加一个将显示设置为块的类

我知道display属性无法设置动画，但我不知道如果不使用display属性，如何实现同样的效果

HTML:

JavaScript:

    var menu = document.getElementById("menu");
    var toggleButton = document.getElementById("menu-toggle");

    function toggleMenu() {
        menu.classList.toggle("collapse");
    }

    toggleButton.addEventListener("click", toggleMenu);

---

删除显示属性作为开始。由于无法使用css3将高度设置为

auto

，因此我建议您使用

max height

hack：

.top-navigation {
max-height:102px;
overflow:hidden;
transition:0.2s all ease;
}
.collapse{max-height:1000px;}

然后使用javascript：

var topnavigation = document.getElementById("top-navigation");
var toggleButton = document.getElementById("menu-toggle");

function toggleMenu() {
    topnavigation.classList.toggle("collapse");
}

toggleButton.addEventListener("click", toggleMenu);

完整的工作示例：

var topnavigation=document.getElementById（“顶部导航”）；
var toggleButton=document.getElementById（“菜单切换”）；
函数切换菜单（）{
topnavigation.classList.toggle（“折叠”）；
}
toggleButton.addEventListener（“单击”，切换菜单）
。顶部导航{
位置：固定；
宽度：100%；
z指数：10；
最大高度：102px；
溢出：隐藏；
过渡期：0.5s全部缓解；
}
.collapse{最大高度：1000px；}
.top导航：之后，.top导航：之前{
内容：“；
显示：表；}
.顶部导航：在{
清除：两个；}
.顶部导航标题{
浮动：左；
填充：24px 16px；
框大小：边框框；
}
.顶部导航\u标题img{
宽度：100px；
浮动：左；}
.顶部导航菜单{
浮动：对；
颜色：#FFFFFF；}
.top-navigation_菜单li{
显示：内联块；
边距：20px 0；}
.top-navigation_菜单li a{
显示：块；
填充：16px；
文本转换：大写；
字体大小：13px；}
.崩溃{
显示：阻止！重要；}
.顶部导航切换{
显示：无；
背景色：透明；
边界：0px；
大纲：0px；
边际：0px；
填充：16px；
光标：指针；
浮动：对；
z-索引：2；}
.顶部导航切换。切换工具栏{
显示：块；
宽度：18px；
高度：2倍；
保证金：4px0；
背景色：#FFFFFF；}
@媒体屏幕和屏幕（最大宽度：700px）{
.顶部导航{
背景色：#363636；}
.顶部导航标题{
宽度：100%；}
.顶部导航\u标题img{
宽度：100px；
浮动：左；}
.顶部导航菜单{
浮动：左；
宽度：100%；}
.top-navigation_菜单li{
显示：块；
边距：20px 0；}
.top-navigation_菜单li a{
显示：块；
填充：16px；
文本转换：大写；
字体大小：13px；}
.顶部导航切换{
显示：block；}}









回答得很好！谢谢你的帮助：）
.top-navigation {
max-height:102px;
overflow:hidden;
transition:0.2s all ease;
}
.collapse{max-height:1000px;}

var topnavigation = document.getElementById("top-navigation");
var toggleButton = document.getElementById("menu-toggle");

function toggleMenu() {
    topnavigation.classList.toggle("collapse");
}

toggleButton.addEventListener("click", toggleMenu);