jquery - 通过切换汉堡菜单淡入淡出叠加层

Question

所以我正在开发一个使用汉堡菜单的网站。单击后，此汉堡菜单将显示带有菜单选项的全屏叠加层。

我希望这个叠加层在单击汉堡菜单时淡入，并在再次单击时淡出。

目前，我可以通过向叠加层菜单添加一个事件类并添加以下 CSS 来使叠加层淡入:

.overlay {

  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 1s, visibility 1s;
  transition: opacity 1s, visibility 1s;

}

.overlay.open {

visibility: visible;
opacity: 1;
z-index: 50;

}

但是，我不知道如何在再次单击切换按钮时使叠加层淡出。

如果你们想检查一个工作示例，这里是开发站点:

http://dev.alvaroching.com/

谢谢!

Answer 1

z-index 属性不可设置动画，因此在打开和未打开的导航覆盖层上都需要属性才能看到其他动画。 (这相当于将元素设置为 display: none 并想知道为什么动画不可见。)

将 z-index 从 .overlay.open 类移动到主 .overlay 类可以解决这个问题。