MYYA
代替：function show(msg = "Hello") { var t = document.getElementById("toast"); t.innerHTML = msg; t.style.display = "flex"; t.style.opacity = 1; setInterval(function() { t.style.opacity = 0; }, 2000);}您可以使用 Vanilla Javascript new .animate() Api，它比 setInterval 和 RequestAnimationFrame() 性能更高： var t = document.getElementById("toast"); t.animate({ filter: ["opacity(1)","opacity(0)"]; // Start & End States of the Animation. },{ duration: 488, // Duration in Ms fill: 'forwards', // retains the end State of the animation. iterations: 1, // Number of iterations or Infinity delay: 88, // Delay for the Animation Start (2000) easing: 'ease-in', // Easing Function // direction:, // endDelay:, // iterationStart:, });这还为您提供了比纯 Css 动画更多的控制，并且更好地匹配浏览器刷新/重绘周期。如果您希望通过触摸或鼠标单击事件来实现此功能，则需要添加适当的事件处理程序来处理此问题。HTML::<html> <head> <title>Toast demo</title> </head><body> <div id="toast"></div> <button id="ShowMsg">Show toast</button> <button id="ShowMsg2">Show toast</button> <script src="LinkToYourJsFile.js">Or Include The Js In Here..</script></body></html>JS::let ShowMsg = document.getElementById("ShowMsg");let ShowMsg2 = document.getElementById("ShowMsg2");function showToast(){ var t = document.getElementById("toast"); t.innerHTML='<p>Message you want to display</p>'; // For multiline, just repeat with <br> or Js equivelent \n t.animate({ filter: ["opacity(0)","opacity(1)"] // Start & End States of the Animation. },{ duration: 488, // Duration in Ms fill: 'forwards', // retains the end State of the animation. iterations: 1, // Number of iterations or Infinity delay: 88, // Delay for the Animation Start (2000) easing: 'ease-in', // Easing Function // direction:, // endDelay:, // iterationStart:, });}ShowMsg.addEventListener("mousedown", showToast); // 1) What is the event, 2) name of the function to run when the event occursShowMsg2.addEventListener("mousedown", showToast2StarvinMarvin); // Repeat the same process for toast 2. ** 请注意，在您的 CSS 中，您的 t => toast Msg 最初应以 filter:opacity(0); 开头；并且没有显示：无；就像你原来的代码一样。当事件被触发时，Javascript 将覆盖它。Js 也必须位于 Html 文档的底部，或者位于链接在 Html 底部的外部文件中。或者包裹在里面document.addEventListener("DOMContentLoaded", (function(){ // Your Anime code & variables etc goes here;}));要淡出元素，请重复，但将事件侦听器更改为“mouseleave”并切换 .animate() 函数中的不透明度值。所以0=1，1=0；
蓝山帝景
我想出了一个完整的想法，可以在指定时间后显示和消失 toast，而且即使在已经显示时调用 toast，它也可以非常顺利地工作。这是我的代码：var t = document.getElementById("toast");var showing = false;var timeout1, timeout2;function showToast(msg = "") { clearTimeout(timeout1); clearTimeout(timeout2); t.innerHTML = msg; if (!showing) { showing = true; t.style.display = "flex"; t.animate({ opacity: ["0", "1"] }, { duration: 1000, iterations: 1, fill: "forwards" }); } timeout1 = setTimeout(() => { showing = false; t.animate({ opacity: ["1", "0"] }, { duration: 1000, iterations: 1, fill: "forwards" }); }, 3000); timeout2 = setTimeout(() => { t.style.display = "none"; }, 4000);}* { box-sizing: border-box;}#toast { background-color: black; color: white; border-radius: 0.7em; position: fixed; left: 50%; top: 50%; opacity: 0; display: none; transform: translateX(-50%) translateY(-50%); padding: 10px; text-align: center; align-items: center; justify-content: center;}button { width: 100%; height: 50%;}<div id="toast"></div><button onclick="showToast('Hello')">Show toast</button><button onclick="showToast('Hi')">Show toast</button>如有更多建议，我们将不胜感激。