X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/ddb7f33868ea499ab8f48a7062f145e8c0fbe02f..refs/pull/2023/head:/resources/js/components/overlay.js

diff --git a/resources/js/components/overlay.js b/resources/js/components/overlay.js
index ad6a01061..6963ba9d1 100644
--- a/resources/js/components/overlay.js
+++ b/resources/js/components/overlay.js
@@ -1,3 +1,4 @@
+import {fadeIn, fadeOut} from "../services/animations";
 
 class Overlay {
 
@@ -19,29 +20,15 @@ class Overlay {
         }
     }
 
-    hide() { this.toggle(false); }
-    show() { this.toggle(true); }
-
-    toggle(show = true) {
-        let start = Date.now();
-        let duration = 240;
-
-        function setOpacity() {
-            let elapsedTime = (Date.now() - start);
-            let targetOpacity = show ? (elapsedTime / duration) : 1-(elapsedTime / duration);
-            this.container.style.opacity = targetOpacity;
-            if (elapsedTime > duration) {
-                this.container.style.display = show ? 'flex' : 'none';
-                if (show) {
-                    this.focusOnBody();
-                }
-                this.container.style.opacity = '';
-            } else {
-                requestAnimationFrame(setOpacity.bind(this));
-            }
-        }
+    hide(onComplete = null) { this.toggle(false, onComplete); }
+    show(onComplete = null) { this.toggle(true, onComplete); }
 
-        requestAnimationFrame(setOpacity.bind(this));
+    toggle(show = true, onComplete) {
+        if (show) {
+            fadeIn(this.container, 240, onComplete);
+        } else {
+            fadeOut(this.container, 240, onComplete);
+        }
     }
 
     focusOnBody() {