Mitigate flashing screen with fading

2 files changed, 14 insertions, 1 deletions

diff --git a/pointless/viewer/screen.js b/pointless/viewer/screen.js
index 28f4f55..42ea781 100644
--- a/pointless/viewer/screen.js
+++ b/pointless/viewer/screen.js
@@ -29,7 +29,7 @@ class Screen {
       this.timer.start();
 
     this.page = page;
-    this._refreshPage();
+    this._changePage();
     this.pageTurnCount++;
   }
 
@@ -69,6 +69,15 @@ class Screen {
     });
   }
 
+  _changePage() {
+    this.canvas.style.opacity = 0;
+    var self = this;
+    setTimeout(function() {
+      self._refreshPage();
+      self.canvas.style.opacity = 1;
+    }, 300);
+  }
+
   _refreshPage() {
     if (this.page == null) return;
     var viewport = this.page.getViewport(1);
diff --git a/pointless/viewer/viewer.css b/pointless/viewer/viewer.css
index d5b766b..8ec608f 100644
--- a/pointless/viewer/viewer.css
+++ b/pointless/viewer/viewer.css
@@ -91,3 +91,7 @@ header span {
 .notification:empty {
   display: none;
 }
+
+#screen {
+  transition: opacity 300ms;
+}