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

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到 animation，当 animation 结束时，它将保留最后一个关键帧的样式值， 更多信息。 我还对 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>

更新

要更改 animation 的长度：

1. 更改 CSS 中的可见长度（ forwards前的数字）
2. 更改 JS 中的 setTimeout 长度（CSS 输入/输出 animation 时间 + forwards前的数字）

例如，如果您希望它显示 5 秒：

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