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

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

• javascript
• sweetalert2

2 Answers 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/npm/sweetalert2@11"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr/npm/animate.css@3/animate.min.css">

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