如何防止此元素隐藏然后再次出现？

Question

我对下面的代码有疑问。它应该做的是在页面加载时显示祝酒词。 3500 毫秒后，它应该会消失。它会这样做，然后再次出现，跳过淡出过渡，然后消失。如何让它淡入，等待3500毫秒，然后淡出？

function showDonate() {
  var x = document.getElementById("snackbar");
  x.className = "show";
  setTimeout(function() {
    x.className = x.className.replace("show", "");
  }, 3300);
}

showDonate()

#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: 130px;
  background-color: #212529;
  color: #fff;
  text-align: right;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z -index: 999;
  left: 50%;
  bottom: 30px;
  font-size: 17px;
}

#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}

@-webkit-keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}

@keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}

<div id="snackbar"> <b>Hey There!</b> Give us your money! <a href="#">Link</a></div>

Answer 1

将forwards添加到动画中，它将在动画结束时保留最后一个关键帧的样式值，more information。我还对 class 更改进行了一些修改。

工作示例：

function showDonate() {
  var x = document.getElementById("snackbar");
  x.classList.add("show");
  setTimeout(function() {
    x.classList.remove("show");
  }, 3300);
}

showDonate()

#snackbar {
  opacity: 0;
  min-width: 250px;
  // margin-left: 130px;
  background-color: #212529;
  color: #fff;
  text-align: right;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z -index: 999;
  // left: 50%;
  bottom: 30px;
  font-size: 17px;
}

#snackbar.show {
  opacity: 1;
  animation: fadein 0.5s, fadeout 0.5s 2.5s forwards;
}

@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}

<div id="snackbar"> <b>Hey There!</b> Give us your money! <a href="#">Link</a></div>

更新

要更改动画的长度：

更改CSS中的可见长度（forwards之前的数字）
更改JS中的setTimeout长度（CSSin/out动画时间+forwards之前的数字）

比如你想让它显示5秒：

CSS: animation: fadein 0.5s, fadeout 0.5s 5s forwards;
JS: }, 5000+500+500);

如何防止此元素隐藏然后再次出现？

How do I prevent this element from Hiding and then showing up again?

html

javascript

css

popup

toast