我正在努力让通知在按下按钮时显示，然后在一段时间后隐藏。我发现的几乎所有资源都实现了基于 jQuery 的解决方案，但我没有使用 JS 框架，也不愿意仅仅为了这个而这样做。到目前为止我得到了什么:
function notify() {
var success = document.getElementById("success");
success.innerHTML = 'ok';
success.style.opacity = '1';
setTimeout(function () {
success.classList.add('fade');
}, 5000);
}#successposition {
position: absolute;
bottom: 0;
left: 50%;
margin-bottom: 100px;
}
#success {
z-index: 12;
position: relative;
left: -50%;
opacity: 0;
border-radius: 5px;
background-color: rgba(38, 213, 26, 0.5);
padding: 15px;
color: #000;
font-size: 0.8em;
}
#success.fade {
opacity: 0;
transition: 0.5s opacity;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1.0">
<meta charset="UTF-8" />
<script src="notify.js"></script>
</head>
<body>
<button onclick="notify()">click me</button>
<div id="successposition"><div id="success"></div></div>
</body>
</html>遗憾的是，这只显示点击时的通知，但它永远不会消失。有人可以帮忙吗？
最佳答案
您的内联样式会覆盖基于类的样式。切换到仅类:
function notify() {
var success = document.getElementById("success");
success.innerHTML = 'ok';
success.classList.add('show'); // <-- HERE
setTimeout(function () {
success.classList.remove('show'); // <-- HERE
}, 2000);
}#successposition {
position: absolute;
bottom: 0;
left: 50%;
margin-bottom: 100px;
}
#success {
z-index: 12;
position: relative;
left: -50%;
opacity: 0;
border-radius: 5px;
background-color: rgba(38, 213, 26, 0.5);
padding: 15px;
color: #000;
font-size: 0.8em;
opacity: 0;
transition: 0.5s opacity; /* <-- HERE */
}
#success.show {
opacity: 1;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1.0">
<meta charset="UTF-8" />
<script src="notify.js"></script>
</head>
<body>
<button onclick="notify()">click me</button>
<div id="successposition"><div id="success"></div></div>
</body>
</html>关于javascript - 为什么我的函数在延迟后不删除元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54371970/