我怎样才能检测到完成 fadeoutAnim 和调用函数？

Question

我正在使用jquery，我想制作吐司消息。

所以，如果 "show" class 追加到 div，吐司消息将淡入，并在几秒钟后淡出。

我必须完成淡出动画，删除 "show" class。

这是我的第一个代码。

var showToast = function(msg) {
     clearTimeout(window.timeoutToast);

     $("toastDiv p").html(msg);
     $("toastDiv").addClass("show");
     window.timeoutToast = setTimeout(function() {
         $("toastDiv").removeClass("show")
     }, 3000);
 };

我尝试调用 clearTimeoutFunc 和 removeClass show class。

但是如果我快速点击多个，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;
}

请修复我的代码...

Answer 1

针对仅 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>

我怎样才能检测到完成 fadeoutAnim 和调用函数？

How can I detect to finish fadeoutAnim and call function?

javascript

css

jquery

webkit