全屏菜单淡入淡出不适用于 svg 和图像答案

【问题标题】：Fullscreen menu fade won't work with svg and image全屏菜单淡入淡出不适用于 svg 和图像
【发布时间】：2016-04-11 17:33:36
【问题描述】：

我一直在尝试使用平滑淡入淡出进行全屏菜单切换。

这适用于除 svg 元素和图片之外的所有元素。

基本上，当您单击菜单汉堡时，您可以清楚地看到图像和 svg 图标没有淡出，其他一切都会淡出，但不是这些元素。

起初我认为这可能是与 z-index 相关的问题，并更改了数字，但没有任何效果。

我这几天一直在努力寻找这方面的信息，但找不到任何东西。

非常感谢您在这方面的帮助，谢谢。

Heres my fiddle

和代码：

(function () {

    "use strict";

    var toggles = document.querySelectorAll(".c-hamburger");

    for (var i = toggles.length - 1; i >= 0; i--) {
        var toggle = toggles[i];
        toggleHandler(toggle);
    };

    function toggleHandler(toggle) {
        toggle.addEventListener("click", function (e) {
            e.preventDefault();
            (this.classList.contains("is-active") === true) ? this.classList.remove("is-active") || $("#testMenu").fadeOut(300) : this.classList.add("is-active") || $("#testMenu").fadeIn(300);
        });
    }

})();

【问题讨论】：

标签： javascript jquery css svg fullscreen

【解决方案1】：

这是因为菜单容器列在源图像之前，因此它在 z 轴上的索引较低。使用z-index 和position:relative 在顶部制作#testMenu

 <nav id="testMenu" style="display: none; z-index: 1000; position: relative;">

【讨论】：

【解决方案2】：

要控制z-index，元素必须具有堆叠顺序，例如声明position。

当您将位置属性引入组合时，任何定位元素（及其子元素）都会显示在任何非定位元素的前面。

尝试例如，改变这个：

#contact {
  z-index: -1;
  position: relative;
  ...
}

这里是working fiddle

【讨论】：

谢谢莱昂内尔！你真好
很高兴它对您有所帮助。 z-index 有时是一团糟。