如何更改SweetAlert2的关闭动画？

Question

我正在使用带有 animate.css 的 SweetAlert2 v8 来更改弹出动画。我使用的动画是 fadeInRight。我也在使用链式警报，并想将关闭动画更改为 fadeOutLeft 以产生它在页面上滑动的效果。

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

我试过：

使用 onClose 添加 classes
使用 onOpen 删除淡入 class 然后使用 onClose 添加淡出 class

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

谢谢

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

Answer 2

从v9.0.0, there are showClass and hideClass parameters, docs are here: https://sweetalert2.github.io#showClass开始

根据需要自定义 opening/closing 动画，例如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">

如何更改SweetAlert2的关闭动画？

How to change the close animation of SweetAlert2?

javascript

sweetalert2