From 62e6286e59441cc8488ad53b197b6de0eb6c2e0a Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Mon, 16 Mar 2020 14:42:08 +0300
Subject: [PATCH] Opacity transition for BlockUI Modal

---
 public/themes/nova-light/theme.css |  6 +++++-
 src/components/blockui/BlockUI.vue | 26 ++++++++++++++++++++++----
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/public/themes/nova-light/theme.css b/public/themes/nova-light/theme.css
index 96651b22f..d5b761113 100644
--- a/public/themes/nova-light/theme.css
+++ b/public/themes/nova-light/theme.css
@@ -3133,7 +3133,8 @@ body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-icon-close
 }
 
 body .p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
+  background-color: #000000;
+  opacity: 0.4;
 }
 body .p-overlaypanel {
   background-color: #ffffff;
@@ -4045,5 +4046,8 @@ body .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > :first-child {
   display: inline-block;
   width: calc(100% - 2.357em);
 }
+body .p-blockui {
+  transition-duration: 0.2s;
+}
 
 /* Add your customizations of theme here */
diff --git a/src/components/blockui/BlockUI.vue b/src/components/blockui/BlockUI.vue
index 6c5f22c23..24f4f0517 100644
--- a/src/components/blockui/BlockUI.vue
+++ b/src/components/blockui/BlockUI.vue
@@ -44,7 +44,7 @@ export default {
         block() {
             if (this.fullScreen) {
                 this.mask = document.createElement('div');
-                this.mask.setAttribute('class', 'p-blockui p-component-overlay p-blockui-document');
+                this.mask.setAttribute('class', 'p-blockui p-blockui-document');
                 document.body.appendChild(this.mask);
                 DomHandler.addClass(document.body, 'p-overflow-hidden');
                 document.activeElement.blur();
@@ -54,20 +54,32 @@ export default {
                 if (target) {
                     this.mask = document.createElement('div');
 
-                    this.mask.setAttribute('class', 'p-blockui p-component-overlay');
+                    this.mask.setAttribute('class', 'p-blockui');
                     target.$el.appendChild(this.mask);
                     target.$el.style.position = 'relative';
                 }
             }
 
-            if (this.mask && this.autoZIndex) {
+            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() {
-            if (this.fullScreen) {
+            DomHandler.addClass(this.mask, 'p-blockui-leave');
+            this.mask.addEventListener('transitionend', () => {
+                this.removeMask();
+            });
+        },
+        removeMask() {
+             if (this.fullScreen) {
                 document.body.removeChild(this.mask);
                 DomHandler.removeClass(document.body, 'p-overflow-hidden');
             }
@@ -88,6 +100,8 @@ export default {
     left: 0;
     width: 100%;
     height: 100%;
+    opacity: 0;
+    transition-property: opacity;
 }
 
 .p-blockui.p-component-overlay {
@@ -97,4 +111,8 @@ export default {
 .p-blockui-document.p-component-overlay {
     position: fixed;
 }
+
+.p-blockui-leave.p-component-overlay {
+    opacity: 0 !important;
+}
 </style>