我正在使用 jquery,我想制作 toast 消息。
因此,如果“show”类附加到 div,toast 消息将淡入,并在几秒钟后淡出。
我必须完成淡出动画,删除“show”类。
这是我的第一个代码。
var showToast = function(msg) {
clearTimeout(window.timeoutToast);
$("toastDiv p").html(msg);
$("toastDiv").addClass("show");
window.timeoutToast = setTimeout(function() {
$("toastDiv").removeClass("show")
}, 3000);
};
我尝试调用 clearTimeoutFunc 和 removeClass 显示类。
但如果我快速点击多个,toastMessage 会淡出,并在闪烁中显示....
我也试过 $("toastDiv").on("animationed webkitAnimationEnd oAnimationEnd MSAnimationEnd", function() { ... }) 但是,当淡入动画结束时,该函数被调用。
首先是我的html代码
<div class="toastDiv">
<p class="txt_toast">blablabla</p>
</div>
和我的CSS
.toastDiv.show{
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
请修复我的代码...
最佳答案
针对仅 JS 解决方案进行了编辑:
var showToast = function(msg) {
clearTimeout(window.timeoutToast);
$(".toastDiv p").html(msg);
$(".toastDiv").addClass("show");
$(".toastDiv").on('animationend', function(event) {
var animation = event.originalEvent.animationName;
if (animation === 'fadeout') {
$(".toastDiv").removeClass("show");
}
});
};
showToast('I am toasted!');
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeout {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.toastDiv {
visibility: hidden;
}
.toastDiv.show{
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toastDiv">
<p class="txt_toast">blablabla</p>
</div>
关于javascript - 如何检测完成 fadeoutAnim 和调用函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58195883/