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

您的内联样式会覆盖您基于类的样式。切换到仅课程：

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

如果在.fade中添加！important，效果很好

#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>

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

3 个答案: