Javascript CSS不透明度忽略过渡时间

我的解决方案： 我将

显示

样式更改为

可见性

样式，因为此解决方案最适合我的网页。通过谷歌搜索“显示块覆盖动画”，可以找到许多其他解决方案。被接受的答案是给了我关键词，这样我就可以使用谷歌了

---

原创帖子：

我制作了

fadeIn

和

fadeOut

函数，使用CSS动画而不是JQuery动画来设置不透明度的动画。 点击图像应使弹出的淡入淡出图像超过300毫秒。 点击身体的任何地方都会使弹出窗口淡出，图像淡入超过300毫秒

此时淡出功能正常，但fadeIn似乎忽略了过渡时间，并立即出现。为什么fadeIn不工作

JavaScript:

function fadeIn(elem) {
    elem.css("display", "block");
    elem.css("opacity", 1);
}

function fadeOut(elem) {
    elem.css("opacity", 0);
    setTimeout(function() {
        elem.css("display", "none");
    }, 300);
}

$("body").on("click", function(ev) {
      if (ev.target != $("#btn")[0] && $("#popup").is(":visible")) {
        fadeIn($("#btn"));
        fadeOut($("#popup"));
    }
});

$("#btn").on("click", function(ev) {
    fadeIn($("#popup"));
    fadeOut($("#btn"));
});

CSS:

---

可能尝试一下

过渡：不透明度0.3s



功能fadeIn（elem）{
元素css（“显示”、“块”）；
元素css（“不透明度”，1）；
}
功能衰减（elem）{
元素css（“不透明度”，0）；
setTimeout（函数（）{
元素css（“显示”、“无”）；
}, 300);
}
$（“正文”）。在（“单击”）上，功能（ev）{
如果（ev.target！=$（“#btn”）[0]&&&$（“#弹出窗口”）。为（“：可见”））{
法代因(元);；
淡出（$（“#弹出”）；
}
});
$（“#btn”）。在（“点击”上，功能（ev）{
fadeIn（$（“#弹出”）；
淡出（$）；
});
正文{
高度：10vh；
宽度：10vw；
}
#btn{
位置：绝对位置；
顶部：100px；
左：10px；
-webkit转换：0.3s；
过渡：0.3s；
不透明度：1；
}
#弹出窗口{
位置：绝对位置；
背景色：黑色；
显示：无；
颜色：红色；
z指数：1；
填充：0.1em；
-webkit转换：不透明度0.3s；
过渡：不透明度0.3s；
不透明度：0；
}


单击此处关闭弹出窗口

可能尝试一下

过渡：不透明度0.3s



功能fadeIn（elem）{
元素css（“显示”、“块”）；
元素css（“不透明度”，1）；
}
功能衰减（elem）{
元素css（“不透明度”，0）；
setTimeout（函数（）{
元素css（“显示”、“无”）；
}, 300);
}
$（“正文”）。在（“单击”）上，功能（ev）{
如果（ev.target！=$（“#btn”）[0]&&&$（“#弹出窗口”）。为（“：可见”））{
法代因(元);；
淡出（$（“#弹出”）；
}
});
$（“#btn”）。在（“点击”上，功能（ev）{
fadeIn（$（“#弹出”）；
淡出（$）；
});
正文{
高度：10vh；
宽度：10vw；
}
#btn{
位置：绝对位置；
顶部：100px；
左：10px；
-webkit转换：0.3s；
过渡：0.3s；
不透明度：1；
}
#弹出窗口{
位置：绝对位置；
背景色：黑色；
显示：无；
颜色：红色；
z指数：1；
填充：0.1em；
-webkit转换：不透明度0.3s；
过渡：不透明度0.3s；
不透明度：0；
}


单击此处关闭弹出窗口

问题在于，当您使用
显示：块
/
显示：无
时，如果将其删除，则会正常工作


功能fadeIn（elem）{
/*
元素css（“显示”、“块”）；
*/    
元素css（“不透明度”，1）；
}
功能衰减（elem）{
元素css（“不透明度”，0）；
/*
setTimeout（函数（）{
元素css（“显示”、“无”）；
}, 1300);
*/
}
$（“正文”）。在（“单击”）上，功能（ev）{
如果（ev.target！=$（“#btn”）[0]&&&$（“#弹出窗口”）。为（“：可见”））{
法代因(元);；
淡出（$（“#弹出”）；
}
});
$（“#btn”）。在（“点击”上，功能（ev）{
fadeIn（$（“#弹出”）；
淡出（$）；
});
正文{
高度：10vh；
宽度：10vw；
}
#btn{
位置：绝对位置；
顶部：100px；
左：10px；
过渡：1.3s；
不透明度：1；
}
#弹出窗口{
位置：绝对位置；
背景色：黑色；
颜色：红色；
z指数：1；
填充：0.1em；
过渡：1.3s；
不透明度：0；
}


单击此处关闭弹出窗口

问题在于，当您使用
显示：块
/
显示：无
时，如果将其删除，则会正常工作


功能fadeIn（elem）{
/*
元素css（“显示”、“块”）；
*/    
元素css（“不透明度”，1）；
}
功能衰减（elem）{
元素css（“不透明度”，0）；
/*
setTimeout（函数（）{
元素css（“显示”、“无”）；
}, 1300);
*/
}
$（“正文”）。在（“单击”）上，功能（ev）{
如果（ev.target！=$（“#btn”）[0]&&&$（“#弹出窗口”）。为（“：可见”））{
法代因(元);；
淡出（$（“#弹出”）；
}
});
$（“#btn”）。在（“点击”上，功能（ev）{
fadeIn（$（“#弹出”）；
淡出（$）；
});
正文{
高度：10vh；
宽度：10vw；
}
#btn{
位置：绝对位置；
顶部：100px；
左：10px；
过渡：1.3s；
不透明度：1；
}
#弹出窗口{
位置：绝对位置；
背景色：黑色；
颜色：红色；
z指数：1；
填充：0.1em；
过渡：1.3s；
不透明度：0；
}


单击此处关闭弹出窗口

你知道为什么显示会这样影响它吗？设置
display:block
后，它不应该启动动画吗？@DarkMatterMatt这就是
display:block
的工作方式，所以当您设置
elem.css（“display”，“block”）它只是覆盖动画。您可以做的是，为该区域添加一个超时，所需的是强制浏览器重新绘制该区域。这里有一篇文章更详细地描述了这一点：这个JQuery“有用”吗？我似乎记得通过JavaScript设置它（
elem.style.display=“block”
）不会这样做吗？也许我记错了。@DarkMatterMatt Nope，不管你使用哪一个……请参阅前面的注释链接谢谢你的帮助，我将
display
更改为
visibility
，它对我来说很好（绝对位置意味着它不会干扰页面流）。你知道
display
为什么会这样影响它吗？设置了
显示：块
后，它不应该启动动画吗？@DarkMatterMatt it it is ho
#btn {
    position: absolute;
    top: 100px;
    left: 10px;
    transition: 0.3s;
    opacity: 1;
}

#popup {
    position: absolute;
    background-color: black;
    display: none;
    color: red;
    z-index: 1;
    padding: 0 1em;
    transition: 0.3s;
    opacity: 0;
}