javascript - How to change the close animation of SweetAlert2? - Stack Overflow

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

Share Improve this question Follow asked Aug 3, 2019 at 20:41 BaeFellBaeFell 65011 gold badge88 silver badges2828 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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