如何更改SweetAlert2的关闭动画？

Question

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

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

我已经尝试过：

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

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

谢谢你

Answer 1

从

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">

Answer 2

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