Fixed #1599 - Modal layer enter-leave transition v2

primefaces · Sep 23, 2021 · 86470e6 · 86470e6
1 parent 7766023
commit 86470e6
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 68 deletions.
diff --git a/src/components/blockui/BlockUI.vue b/src/components/blockui/BlockUI.vue
@@ -42,9 +42,11 @@ export default {
     },
     methods: {
         block() {
+            let styleClass = 'p-blockui p-component-overlay p-component-overlay-enter';
             if (this.fullScreen) {
+                styleClass += ' p-blockui-document';
                 this.mask = document.createElement('div');
-                this.mask.setAttribute('class', 'p-blockui p-blockui-document');
+                this.mask.setAttribute('class', styleClass);
                 document.body.appendChild(this.mask);
                 DomHandler.addClass(document.body, 'p-overflow-hidden');
                 document.activeElement.blur();
@@ -53,26 +55,20 @@ export default {
                 const target = this.$children ? this.$children[0]: null;
                 if (target) {
                     this.mask = document.createElement('div');
-                    this.mask.setAttribute('class', 'p-blockui');
+                    this.mask.setAttribute('class', styleClass);
                     target.$el.appendChild(this.mask);
                     target.$el.style.position = 'relative';
                 }
             }
 
-            if (this.mask) {
-                setTimeout(() => {
-                    DomHandler.addClass(this.mask, 'p-component-overlay');
-                }, 1);
-            }
-
             if (this.autoZIndex) {
                 this.mask.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
             }
 
             this.$emit('block');
         },
         unblock() {
-            DomHandler.addClass(this.mask, 'p-blockui-leave');
+            DomHandler.addClass(this.mask, 'p-component-overlay-leave');
             this.mask.addEventListener('animationend', () => {
                 this.removeMask();
             });
@@ -99,8 +95,6 @@ export default {
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: transparent;
-    transition-property: background-color;
 }
 
 .p-blockui.p-component-overlay {
@@ -110,8 +104,4 @@ export default {
 .p-blockui-document.p-component-overlay {
     position: fixed;
 }
-
-.p-blockui.p-blockui-leave.p-component-overlay {
-    background-color: transparent;
-}
 </style>
diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
@@ -1267,7 +1267,7 @@ export default {
             if (!this.mask) {
                 this.mask = document.createElement('div');
                 this.mask.style.zIndex = String(parseInt(this.$refs.overlay.style.zIndex, 10) - 1);
-                DomHandler.addMultipleClasses(this.mask, 'p-datepicker-mask p-datepicker-mask-scrollblocker');
+                DomHandler.addMultipleClasses(this.mask, 'p-datepicker-mask p-datepicker-mask-scrollblocker p-component-overlay p-component-overlay-enter');
 
                 this.maskClickListener = () => {
                     this.overlayVisible = false;
@@ -1276,18 +1276,14 @@ export default {
 
                 document.body.appendChild(this.mask);
                 DomHandler.addClass(document.body, 'p-overflow-hidden');
-
-                setTimeout(() => {
-                    DomHandler.addClass(this.mask, 'p-component-overlay');
-                }, 1);
             }
         },
         disableModality() {
             if (this.mask) {
                 this.overlayVisible = false;
 
-                DomHandler.addClass(this.mask, 'p-datepicker-mask-leave');
-                this.mask.addEventListener('transitionend', () => {
+                DomHandler.addClass(this.mask, 'p-component-overlay-leave');
+                this.mask.addEventListener('animationend', () => {
                     this.destroyMask();
                 });
             }
@@ -2323,12 +2319,4 @@ export default {
     transform: translate(-50%, -50%);
 }
 
-.p-datepicker-mask {
-    background-color: transparent;
-    transition-property: background-color;
-}
-
-.p-datepicker-mask.p-datepicker-mask-leave.p-component-overlay {
-    background-color: transparent;
-}
 </style>
diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
@@ -84,18 +84,18 @@ export default {
     },
     documentKeydownListener: null,
     updated() {
-        this.removeStylesFromMask();
+        // this.removeStylesFromMask();
 
         if (this.visible && !this.maskVisible) {
             this.maskVisible = true;
         }
 
-        if (this.modal && this.$refs.mask && !DomHandler.hasClass(this.$refs.mask, 'p-component-overlay')) {
-            DomHandler.addClass(this.$refs.mask, 'p-component-overlay');
-        }
+        // if (this.modal && this.$refs.mask && !DomHandler.hasClass(this.$refs.mask, 'p-component-overlay')) {
+        //     DomHandler.addClass(this.$refs.mask, 'p-component-overlay');
+        // }
     },
     mounted() {
-        this.removeStylesFromMask();
+        // this.removeStylesFromMask();
     },
     beforeDestroy() {
         this.restoreAppend();
@@ -119,7 +119,7 @@ export default {
             this.enableDocumentSettings();
         },
         onBeforeLeave() {
-            DomHandler.addClass(this.$refs.mask, 'p-dialog-mask-leave');
+            // DomHandler.addClass(this.$refs.mask, 'p-dialog-mask-leave');
         },
         onLeave() {
             this.$emit('hide');
@@ -266,7 +266,7 @@ export default {
             };
         },
         maskClass() {
-            return ['p-dialog-mask', this.getPositionClass()];
+            return ['p-dialog-mask', {'p-component-overlay p-component-overlay-enter': this.modal}, this.getPositionClass()];
         },
         dialogClass() {
             return ['p-dialog p-component', {
@@ -306,8 +306,6 @@ export default {
     justify-content: center;
     align-items: center;
     pointer-events: none;
-    background-color: transparent;
-    transition-property: background-color;
 }
 
 .p-dialog-mask.p-component-overlay {
@@ -369,10 +367,6 @@ export default {
     transform: scale(0.7);
 }
 
-.p-dialog-mask.p-dialog-mask-leave {
-    background-color: transparent;
-}
-
 /* Top, Bottom, Left, Right, Top* and Bottom* */
 .p-dialog-top .p-dialog,
 .p-dialog-bottom .p-dialog,

diff --git a/src/components/galleria/Galleria.vue b/src/components/galleria/Galleria.vue
@@ -138,7 +138,7 @@ export default {
             DomHandler.addClass(document.body, 'p-overflow-hidden');
         },
         onBeforeLeave() {
-            DomHandler.addClass(this.$refs.mask, 'p-galleria-mask-leave');
+            DomHandler.addClass(this.$refs.mask, 'p-component-overlay-leave');
         },
         onAfterLeave() {
             this.maskVisible = false;
@@ -179,7 +179,7 @@ export default {
     },
     computed: {
         maskContentClass() {
-            return ['p-galleria-mask', {
+            return ['p-galleria-mask p-component-overlay p-component-overlay-enter', {
                 'p-galleria-visible': this.visible
             }, this.maskClass];
         }
@@ -428,8 +428,6 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: transparent;
-    transition-property: background-color;
 }
 
 .p-galleria-close {
@@ -467,10 +465,6 @@ export default {
     opacity: 0;
 }
 
-.p-galleria-mask.p-galleria-mask-leave {
-    background-color: transparent;
-}
-
 /* Keyboard Support */
 .p-items-hidden .p-galleria-thumbnail-item {
     visibility: hidden;

diff --git a/src/components/imagepreview/ImagePreview.vue b/src/components/imagepreview/ImagePreview.vue
@@ -197,7 +197,7 @@ export default {
 .p-image-preview-leave-active {
     transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
 }
-.p-image-preview-enter-from,
+.p-image-preview-enter,
 .p-image-preview-leave-to {
     opacity: 0;
     transform: scale(0.7);

diff --git a/src/components/sidebar/Sidebar.vue b/src/components/sidebar/Sidebar.vue
@@ -88,23 +88,19 @@ export default {
         enableModality() {
             if (!this.mask) {
                 this.mask = document.createElement('div');
-                this.mask.setAttribute('class', 'p-sidebar-mask');
+                this.mask.setAttribute('class', 'p-sidebar-mask p-component-overlay p-component-overlay-enter');
                 this.mask.style.zIndex = String(parseInt(this.$refs.container.style.zIndex, 10) - 1);
                 if (this.dismissable) {
                     this.bindMaskClickListener();
                 }
                 document.body.appendChild(this.mask);
                 DomHandler.addClass(document.body, 'p-overflow-hidden');
-
-                setTimeout(() => {
-                    DomHandler.addClass(this.mask, 'p-component-overlay');
-                }, 1);
             }
         },
         disableModality() {
             if (this.mask) {
-                DomHandler.addClass(this.mask, 'p-sidebar-mask-leave');
-                this.mask.addEventListener('transitionend', () => {
+                DomHandler.addClass(this.mask, 'p-component-overlay-leave');
+                this.mask.addEventListener('animationend', () => {
                     this.destroyModal();
                 });
             }
@@ -173,15 +169,6 @@ export default {
     justify-content: center;
 }
 
-.p-sidebar-mask {
-    background-color: transparent;
-    transition-property: background-color;
-}
-
-.p-sidebar-mask.p-sidebar-mask-leave.p-component-overlay {
-    background-color: transparent;
-}
-
 .p-sidebar-left {
     top: 0;
     left: 0;