如何防止此元素隐藏然后再次显示？

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

更改旧的className方法

x.className = "show";

to

 x.classList.add("show");

和

x.className.replace("show", "");

to

x.classList.replace("show", "");