How to change the close animation of SweetAlert2?

Question

I'm using SweetAlert2 v8 with animate.css to change the popup animation. The animation I am using is fadeInRight. I'm also using chained alerts and would like to change the closing animation to fadeOutLeft to have the effect of it sliding across the page.

The way I am adding the animate.css class is using the customClass popup property.

I've tried:

• using onClose to add the classes
• using onOpen to remove the fadeIn class then onClose to add the fadeOut class

Neither method seems to work. Would be grateful if anyone knows how to change the closing animation.

Thank you

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

Starting from v9.0.0, there are showClass and hideClass parameters, docs are here: https://sweetalert2.github.io#showClass

Customize opening/closing animations as you wish, e.g. with 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">