通知Html Css Js时出错

Answer 1

我能够通过以下方式获得良好的行为：

var timeoutId = null;

function Notify(NotifyTime) {
  flag = true;
  var myElement = document.getElementById('nofitication_area_gonderen');
  myElement.classList.remove('slideIn'); // added this line here
  myElement.classList.remove('slideOutUp'); // moved this out of the nested setTimeout
  void myElement.offsetWidth;
  myElement.classList.add('slideIn');

  document.getElementById("nofitication_area_gonderen_label").innerHTML = '<span> Test <span style="color: yellow;"> Notify </span> </span>';

  timeoutId = setTimeout(() => {
    if (flag) {
      myElement.classList.remove('slideIn'); // added this line here
      myElement.classList.add('slideOutUp');
    }
  }, NotifyTime);
}

document.getElementById("click_btn").addEventListener("click", function() {
  if (timeoutId != null) {
    clearTimeout(timeoutId);
  }
  Notify(2500)
});

我重新安排了滑入/滑出类的添加和删除，以便滑出后它实际上会保持不变。我还保存了 setTimeout 的 id，这样如果再次单击该按钮，我可以取消它；这样，它就不会在新单击后滑入的中间突然添加 SlideOutUp。

您可以在这个jsfiddle中运行它：https://jsfiddle.net/MoFried/ohtebj2v/28/

或者您可以运行下面的代码片段：

var timeoutId = null;

function Notify(NotifyTime) {
  flag = true;
  var myElement = document.getElementById('nofitication_area_gonderen');
  myElement.classList.remove('slideIn'); // added this line here
  myElement.classList.remove('slideOutUp'); // moved this out of the nested setTimeout
  void myElement.offsetWidth;
  myElement.classList.add('slideIn');

  document.getElementById("nofitication_area_gonderen_label").innerHTML = '<span> Test <span style="color: yellow;"> Notify </span> </span>';

  timeoutId = setTimeout(() => {
    if (flag) {
      myElement.classList.remove('slideIn'); // added this line here
      myElement.classList.add('slideOutUp');
    }
  }, NotifyTime);
}

document.getElementById("click_btn").addEventListener("click", function() {
  if (timeoutId != null) {
    clearTimeout(timeoutId);
  }
  Notify(2500)
});

.nofitication_area_gonderen {
  position: absolute;
  width: 341px;
  height: 83px;
  top: 48px;
  left: 100px;
  flex-shrink: 0;
  background: rgba(19, 20, 20, 0.76);
}

.nofitication_area_gonderen_top_bar {
  position: absolute;
  width: 341px;
  height: 26px;
  top: 0px;
  flex-shrink: 0;
  background: rgba(19, 20, 20, 0.88);
}

.nofitication_area_gonderen_top_bar_lbl {
  position: relative;
  left: 10px;
  top: 3px;
  color: #689BFF;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 141%;
  /* 0px */
}

.nofitication_area_gonderen_label {
  position: absolute;
  top: 26px;
  height: 57px;
  width: 341px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 200;
  line-height: 141%;
  /* 0px */
}

.slideIn {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes slideInDown {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}


/* style.css */

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    transform: translateY(-160%);
  }
}

@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    transform: translateY(-160%);
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <div class="nofitication_area_gonderen" id="nofitication_area_gonderen">
    <span class="nofitication_area_gonderen_top_bar">
        <label class="nofitication_area_gonderen_top_bar_lbl" id="nofitication_area_gonderen_top_bar_lbl">Notification</label>
      </span>

    <span class="nofitication_area_gonderen_label" id="nofitication_area_gonderen_label"></span>
  </div>

  <button id="click_btn">Click Here</button>

  <script src="script.js"></script>
</body>

</html>