Opacity transition for BlockUI Modal

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 */

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>