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

Question

有谁知道如何在关闭时将动画应用于甜蜜警报 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'});
    }
  });
);

Answer 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);
    });
}

Answer 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';
      }
    })
  });
);