fix: do not animate backdrop for queues (sweetalert2#1900)

* fix: do not animate backdrop for queues * do not remove queue container in removePopupAndResetState()
matvejs16 · Feb 22, 2020 · 45e1a3a · 45e1a3a
1 parent f72441c
commit 45e1a3a
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 3 deletions.
diff --git a/src/instanceMethods/close.js b/src/instanceMethods/close.js
@@ -21,7 +21,7 @@ function removePopupAndResetState (instance, container, isToast, onAfterClose) {
     globalState.keydownHandlerAdded = false
   }
 
-  if (container.parentNode) {
+  if (container.parentNode && !document.body.getAttribute('data-swal2-queue-step')) {
     container.parentNode.removeChild(container)
   }
 

diff --git a/src/scss/_core.scss b/src/scss/_core.scss
@@ -131,6 +131,10 @@
     }
   }
 
+  &.swal2-no-transition {
+    transition: none !important;
+  }
+
   @include not('.swal2-top',
   '.swal2-top-start',
   '.swal2-top-end',

diff --git a/src/utils/classes.js b/src/utils/classes.js
@@ -16,6 +16,7 @@ export const swalClasses = prefix([
   'popup',
   'modal',
   'no-backdrop',
+  'no-transition',
   'toast',
   'toast-shown',
   'toast-column',

diff --git a/src/utils/dom/init.js b/src/utils/dom/init.js
@@ -47,7 +47,7 @@ const sweetHTML = `
 const resetOldContainer = () => {
   const oldContainer = getContainer()
   if (!oldContainer) {
-    return
+    return false
   }
 
   oldContainer.parentNode.removeChild(oldContainer)
@@ -59,6 +59,8 @@ const resetOldContainer = () => {
       swalClasses['has-column']
     ]
   )
+
+  return true
 }
 
 let oldInputVal // IE11 workaround, see #1109 for details
@@ -120,7 +122,7 @@ const setupRTL = (targetElement) => {
  */
 export const init = (params) => {
   // Clean up the old popup container if it exists
-  resetOldContainer()
+  const oldContainerExisted = resetOldContainer()
 
   /* istanbul ignore if */
   if (isNodeEnv()) {
@@ -130,6 +132,9 @@ export const init = (params) => {
 
   const container = document.createElement('div')
   container.className = swalClasses.container
+  if (oldContainerExisted) {
+    addClass(container, swalClasses['no-transition'])
+  }
   container.innerHTML = sweetHTML
 
   const targetElement = getTarget(params.target)

diff --git a/src/utils/openPopup.js b/src/utils/openPopup.js
@@ -34,6 +34,7 @@ export const openPopup = (params) => {
   if (typeof params.onOpen === 'function') {
     setTimeout(() => params.onOpen(popup))
   }
+  dom.removeClass(container, swalClasses['no-transition'])
 }
 
 function swalOpenAnimationFinished (event) {