Почему моя функция не удаляет элемент после задержки? - PullRequest
Новая
       43

Почему моя функция не удаляет элемент после задержки?

0 голосов
/ 25 января 2019

Я пытаюсь сделать так, чтобы уведомление показывалось нажатием кнопки, а затем скрывалось через некоторое время.Почти все ресурсы, которые я нашел, реализуют решение, основанное на 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>

К сожалению, это показывает только уведомление при нажатии, но оно никогда не исчезнет.Кто-нибудь может помочь?

Ответы [ 3 ]

0 голосов
/ 25 января 2019

Я смог заставить ваш код работать с одной модификацией, добавил я! Это важно для прозрачности fade. 

#success.fade {
  opacity: 0 !important;
  transition: 0.5s opacity;
}
0 голосов
/ 25 января 2019

Если вы добавите! Важный для .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>
0 голосов
/ 25 января 2019

Ваши встроенные стили переопределяют ваши стили на основе классов.Переключиться только на классы: 

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