javascript - Can you remove the 'flash animation' between modals on sweet alert 2

Question

I'm using sweet alert 2 to chain modals together.

I was hoping to get the transition between modals as seamless as possible (removing the animation with hideClass & showClass. However, there is still a very noticeable 'flash' or blink when pressing continue between the modals.

Here's what I have:

Swal.mixin({
  confirmButtonText: 'Continue',
  confirmButtonColor: '#04D4CD',
})
  .queue([
  {
    title: 'Welcome to blah blah!',
    text: 'To get started we'll need some information from you',
    imageUrl: 'https://unsplash.it/400/200',
    imageWidth: 400,
    imageHeight: 200,
    hideClass: {
    popup: '',
    icon: '',  
    },
  },
  {
   title: 'Question 2', 
   text: 'More text is here.',
   imageUrl: 'https://unsplash.it/400/200',
   imageWidth: 400,
   imageHeight: 200,
   showClass: {
    popup: '',
    icon: '', 
  },
  hideClass: {
    popup: '',
    backdrop:'',
    icon: '',
  },
  },
  {
   title: 'Question 3', 
   text: 'Thats it!', 
   imageUrl: 'https://unsplash.it/400/200',
   imageWidth: 400,
   imageHeight: 200, 
   confirmButtonText: 'Get Started',
   showClass: {
   popup: '',
   icon: '',  
  }, 
  }
])

And a codepen where you can see the flash - https://codepen.io/matt-tailwise/pen/vYXMVGJ.

Is there anyway to remove this?

Thanks for your help!

Answer 1

The keys you are using to configure (CSS classes for animations when showing/hidden a popup) sweetalert are empty. Delete hideclass and showclass. Delete:

showClass: {
   popup: '',
   icon: '',  
}, 

and

hideClass: {
    popup: '',
    backdrop:'',
    icon: '',
},