javascriptsweetalert2

How to change the close animation of SweetAlert2?


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:

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

Thank you


Solution

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