From 4c1f5668552b6c4dc6960bba42c764f31a0c37a6 Mon Sep 17 00:00:00 2001
From: Moritz Ruth <dev@moritz-ruth.de>
Date: Sun, 12 Jan 2020 23:12:06 +0100
Subject: [PATCH] Add page transition

---
 assets/global.scss             | 12 ++++++++++++
 assets/js/background-canvas.js |  2 ++
 nuxt.config.js                 |  2 ++
 3 files changed, 16 insertions(+)

diff --git a/assets/global.scss b/assets/global.scss
index 1eb2785..a27a6a3 100644
--- a/assets/global.scss
+++ b/assets/global.scss
@@ -1,3 +1,15 @@
 body {
   font-family: "Alata", sans-serif;
 }
+
+.page-enter-active, .page-leave-active {
+  transition: 500ms ease opacity;
+}
+
+.page-enter, .page-leave-to {
+  opacity: 0;
+}
+
+.page-enter-to, .page-leave {
+  opacity: 1;
+}
diff --git a/assets/js/background-canvas.js b/assets/js/background-canvas.js
index b9b3044..4f37a58 100644
--- a/assets/js/background-canvas.js
+++ b/assets/js/background-canvas.js
@@ -102,6 +102,8 @@ export class BackgroundCanvas {
     // eslint-disable-next-line unicorn/prevent-abbreviations
     const ctx = this._ctx;
 
+    if (ctx === null) return;
+
     ctx.clearRect(0, 0, this.width, this.height);
 
     for (const line of this._lines) {
diff --git a/nuxt.config.js b/nuxt.config.js
index 51447c6..fad680b 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -19,6 +19,8 @@ export default {
   ** Global CSS
   */
   css: ["@/assets/global.scss"],
+
+  layoutTransition: "page",
   /*
   ** Plugins to load before mounting the App
   */