Although Matt's answer works and might be useful in some cases (needed adaptation in my case, see the end of this answer)*, there is other ways to achieve this that I find simpler and more flexible, provided by the library itself.
Since v11.10.0
(Nov 14, 2023) SweetAlert2 allows to specify an animation
param, that will remove all animations when set to false: animation:false
.
I know this param wasn't available when the question was made, and even if it was, this solution, and Matt's one too, have a drawback: we will disable not only the show animations, but every animation, including some animations for hiding or so that we would like to preserve.
A less direct and more customizable way is present in the library since v9.0.0
(Nov 4, 2019). We are allowed to use showClass
and hideClass
params.
For your case, we could use:
Swal.fire({
icon: 'error',
title: 'Oops...',
text: 'Something went wrong!',
showClass: {
popup: ``,
},
})
This way you wouldn`t disable other animations than the show ones.
You wanted to use it for the icon, but you could customize ohter elements (e.g., container, popup, title...). References for customizable elements can be found in this configuration params example.
toast:true
), not the icon, I had to add !important
to the CSS declaration:.no-animate {
animation: none !important;
}
Swal.fire({
icon: 'error',
text: 'Something went wrong!',
customClass: {
popup: 'no-animate'
}
})