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

使用此jquery代码来产生fadein / fadeout效果

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

    });

Answer 3

您需要为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 4

使用transition: opacity 1s, visibility 1s;

替换叠加层中的transition: all 1s;

通过切换汉堡包菜单淡入并淡出叠加层

4 个答案: