javascript - 全屏菜单淡入淡出不适用于 svg 和图像

Question

我一直在尝试制作一个具有平滑淡入和淡出的全屏菜单切换。

这适用于除 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);
        });
    }

})();

Answer 1

发生这种情况是因为菜单容器在源中的图像之前列出，因此它在 z 轴上的索引较低。使用 z-index 和 position:relative

在顶部制作 #testMenu

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