如何更改 SweetAlert2 的关闭动画？答案

【问题标题】：How to change the close animation of SweetAlert2?如何更改 SweetAlert2 的关闭动画？
【发布时间】：2019-08-03 20:41:41
【问题描述】：

我正在使用 SweetAlert2 v8 和 animate.css 来更改弹出动画。我使用的动画是fadeInRight。我也在使用链式警报，并希望将关闭动画更改为 fadeOutLeft 以使其在页面上滑动。

我添加 animate.css 类的方式是使用 customClass 弹出属性。

我试过了：

使用 onClose 添加类
使用onOpen 删除fadeIn 类，然后使用onClose 添加fadeOut 类

这两种方法似乎都不起作用。如果有人知道如何更改结束动画，将不胜感激。

谢谢

【问题讨论】：

标签： javascript sweetalert2

【解决方案1】：

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(animationA, animationB){
    return new Promise(function(resolve) {
        $(".swal2-popup").removeClass(animationA);
        $(".swal2-popup").addClass(animationB);
        setTimeout(function() {
            resolve();
        },300);
    });
}

【讨论】：

【解决方案2】：

从v9.0.0开始，有showClass和hideClass参数，文档在这里：https://sweetalert2.github.io#showClass

根据需要自定义打开/关闭动画，例如Animate.css:

Swal.fire({
  icon: 'info',
  showClass: {
    popup: 'animated fadeInDown faster',
    icon: 'animated heartBeat delay-1s'
  },
  hideClass: {
    popup: 'animated fadeOutUp faster',
  }
})

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3/animate.min.css">

【讨论】：