使用 JavaScript 时转换属性不起作用
我正在尝试在网页中创建“Toast”消息，例如在 Android 中。我已经完成了创作和造型，但唯一的问题是过渡。我希望吐司淡入淡出。这是我到目前为止编写的代码：
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);
}
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
padding: 10px;
margin: 0;
}
#toast {
background-color: black;
color: white;
opacity: 0;
border-radius: 0.7em;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
padding: 10px;
display: none;
text-align: center;
align-items: center;
justify-content: center;
transition: opacity 1s;
}
<html>
<head>
<title>Toast demo</title>
</head>
<body>
<div id="toast"></div>
<button onclick="show('Message')">Show toast</button>
<button onclick="show('Message<br>with<br>multiple<br>lines')">Show toast</button>
</body>
</html>
使用此代码，在第一个实例中，淡入不存在，并且随后的淡入会在很短的时间间隔内显示。为什么会发生这种情况以及如何解决此问题？CSS 解决方案受到赞赏，我不想使用 jQuery。
www说2回答
-
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>如有更多建议，我们将不胜感激。
随时随地看视频慕课网APP
相关分类
Html5