通过切换汉堡菜单来淡入和淡出叠加层

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类可以解决此问题。

Answer 2

您需要

在visibility更改中添加延迟，当它更改为hidden 时，否则它将在动画完成之前消失：

.overlay{
  visibility: hidden;
  opacity: 0;
  transition: opacity 1s, visibility 0s 1s;
}
.overlay.open{
  visibility: visible;
  opacity: 1;
  transition: opacity 1s;
}

小提琴：https://jsfiddle.net/ilpo/wzwrwsdm/

Answer 3

将覆盖类中的transition: opacity 1s, visibility 1s;替换为transition: all 1s;

Answer 4

使用此 jquery 代码来制作淡入/淡出效果

 var x=true;
    $('.button_container').click(function(){
    if(x){
    $('.overlay').fadeOut(1000);x=false;}
    else{
    $('.overlay').fadeIn(1000);x=true;}
    });