为什么过渡属性在这种情况下不起作用

Question

我正在创建一个汉堡菜单，并使用JavaScript来处理菜单的打开和关闭。我的代码是这样的：

const hamburger_menu = document.querySelector('.hamburger-menu');
const side_nav = document.querySelector('.side-nav');
hamburger_menu.addEventListener('click', () => {
side_nav.classList.toggle('open');
})

单击汉堡包菜单时，脚本将切换隐藏菜单上的"打开"类。我希望菜单在出现时具有过渡效果。以下是我的SCSS的样子：

.side-nav {
background: $black;
display: none;
padding: 5rem;
position: absolute;
top: 10.4rem;
right: 0;
bottom: -1.6rem;
left: 0;
opacity: 0;
transition: all .3s ease;
z-index: 100;
&.open {
display: block;
opacity: 1;
}
}

不知怎的，过渡效应不起作用。有人知道原因吗？

Answer 1

转换永远不会在显示属性上工作。它适用于宽度、高度、不透明度等属性。在特定情况下，可以使用高度或宽度来控制此动画。如果侧边栏将从左侧显示，则需要将初始宽度设置为0，然后在单击时将宽度设置为实际宽度。像这样：

.side_nav { 
width: 0;
transition: width 1s;

&.open { 
width: 200px; 
}
}

现在，当开放类将附加到汉堡时，它将设置宽度的动画。

Answer 2

用Visibility替换Display属性可以帮助您。可见性：隐藏=>看得见的

Answer 3

因为您正在display: block;和display: none;之间切换。它不会触发转换。

相反，您可以通过将高度、不透明度或宽度从0操纵到设定值来隐藏/显示。除了高度、不透明度和宽度之外，很可能还有更多的方法。然后将触发从值0到值x的转换。