我正在尝试在网页中创建“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。
2 回答
MYYA
TA贡献1868条经验 获得超4个赞
代替：
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 occurs
ShowMsg2.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；
蓝山帝景
TA贡献1843条经验 获得超7个赞
我想出了一个完整的想法，可以在指定时间后显示和消失 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>
如有更多建议，我们将不胜感激。
- 2 回答
- 0 关注
- 112 浏览
添加回答
举报
0/150
提交
取消