我正在嘗試在網頁中創建“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 底部的外部文件中?；蛘甙诶锩?/p>
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 關注
- 162 瀏覽
添加回答
舉報
0/150
提交
取消