为什么我的函数在延迟后不删除元素？

Question

我正在努力让通知在按下按钮时显示，然后在一段时间后隐藏。我找到的几乎所有资源都实现了基于 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>

遗憾的是，这只会在点击时显示通知，但它永远不会消失。有人可以帮忙吗？

Answer 1

您的内联样式会覆盖您基于 class 的样式。切换到 classes:

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>

Answer 2

我能够让你的代码通过一次修改来工作，我添加了 !important 来淡化的不透明度。

#success.fade {
  opacity: 0 !important;
  transition: 0.5s opacity;
}

Answer 3

如果您将 !important 添加到 .fade，效果会很好

#success.fade {
  opacity: 0 !important;
  transition: 0.5s opacity;
}

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 !important;
  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>

为什么我的函数在延迟后不删除元素？

Why doesn't my function remove an element after a delay?

javascript

transition

fade