关闭模式时如何在甜蜜警报2中应用动画？答案

【问题标题】：How to apply animation in sweet alert 2 when closing the modal?关闭模式时如何在甜蜜警报2中应用动画？
【发布时间】：2017-08-22 03:09:55
【问题描述】：

有谁知道如何在关闭时将动画应用于甜蜜警报 2？看来function(dismiss)似乎并没有奏效。

$.ajax({
  method:'POST',
  url:'sql/record.php',
  data:formData,
  contentType: false,
  processData: false,
  success: function(response){
    swal({
      title: 'Success!',
      text: "New record has successfully added.",
      type: 'success',
      animation: false,
      customClass: 'animated tada',
      showCancelButton: false,
      confirmButtonText: 'OK'
    }).then(function(result){
    }, function(dismiss){
      swal({customClass: 'animated bounceOut'});
    }
  });
);

【问题讨论】：

标签： jquery html css ajax sweetalert2

【解决方案1】：

我知道这是个老问题，但也许有人仍在寻找答案（就像我一样）。

我设法将动画应用于关闭和确认 swal2。此方法不适用于在 swal 外部单击以将其关闭。

swal({
    title: 'swal title',
    html: 'some content',
    showLoaderOnConfirm: true,
    animation: false,
    customClass: "animated fadeInLeft",
    onClose: function(){
        return delaySwalWithAnimation("fadeInLeft","fadeOutRight");
    },
    preConfirm: function(){
        return delaySwalWithAnimation("fadeInLeft","fadeOutRight");
    }
}).then(function(result) {
    //...
}

function delaySwalWithAnimation(animationToRemove, animationToAdd){
    return new Promise(function(resolve) {
        $(".swal2-popup").removeClass(animationToRemove);
        $(".swal2-popup").addClass(animationToAdd);
        setTimeout(function() {
            resolve();
        },300);
    });
}

【讨论】：

【解决方案2】：

您应该添加一个名为onClose 的属性。试试这个：

$.ajax({
  method:'POST',
  url:'sql/record.php',
  data:formData,
  contentType: false,
  processData: false,
  success: function(response){
    swal({
      title: 'Success!',
      text: "New record has successfully added.",
      type: 'success',
      animation: false,
      customClass: 'animated tada',
      showCancelButton: false,
      confirmButtonText: 'OK',
      onClose: function(modal) {
         modal.className += ' animated bounceOut';
      }
    })
  });
);

【讨论】：

这看起来很有希望，但不幸的是我无法让它工作，因为当按下关闭按钮和事件触发之前模式会立即关闭。知道如何解决这个问题吗？我考虑制作一个自定义关闭按钮，但如果有更简单的方法，我将不胜感激。