为什么转换 属性 在这种情况下不起作用？

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');
})

单击汉堡菜单时，脚本将切换隐藏菜单上的 'open' class。我想让菜单出现时有过渡效果。这是我的 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

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

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

Answer 2

用可见性替换显示 属性 可以帮助您。 可见性：隐藏 => 可见。

Answer 3

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

.side_nav { 
  width: 0;
  transition: width 1s;
 
  &.open { 
    width: 200px; 
  }
 }

现在，当打开的 class 附加到您的汉堡包时，它会给宽度设置动画。