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!

score 0 · Answer 1 · answered Jan 21 '21 at 20:15

0

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: '',
},

answered Jan 21 '21 at 20:15

EdwardLi

186
1
12

1

thanks for the reply. I was using those to prevent the 'popup' effect of the 2nd and 3rd modals (i.e. so it looks to the user it is actually just 1 modal with 3 screens). – Matt Jan 22 '21 at 09:49

score 0 · Answer 2 · answered Sep 08 '21 at 21:04

In version 11 I find this to be useful: Disabling Backdrop Animation - StackOverflow

That link answers how to disable the animation completely which I find consequently resolves the flashing backdrop issue.

 showClass: {
    backdrop: 'swal2-noanimation', // disable backdrop animation
    popup: '',                     // disable popup animation
    icon: ''                       // disable icon animation
  },
 hideClass: {
    backdrop: 'swal2-noanimation', // disable backdrop animation
    popup: '',                     // disable popup animation
    icon: ''                       // disable icon animation
  },

Also notably in version 11 queues are deprecated in favor of "async & await" chained alert dialogs.

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

2 Answers2