update: BackgrouhndImageLoader transitions

components/BackgroundImageLoader.vue

@@ -1,9 +1,14 @@
 <template>
   <div class="background-image-loader">
     <div class="background-container">
-      <div class="background background-default"
-           :style="backgroundDefaultStyle">
-      </div>
+      <div class="background background-default"></div>
+      <transition name="fade-fast">
+        <div v-if="loadedImageUrl !== null"
+             class="background background-img background-blur"
+             :style="backgroundBlurStyle"
+        >
+        </div>
+      </transition>
       <transition name="fade">
         <div class="background background-img"
              :key="loadedImageUrl"
@@ -38,17 +43,21 @@ export default {
   },
 
   computed: {
-    backgroundDefaultStyle () {
-      return {
-        background:  'linear-gradient(310deg, #35405d, #6174aa, #a8b3d0, #e2e5ef)'
-      }
-    },
     backgroundStyle () {
       let style = {}
       if (this.loadedImageUrl) {
         style.backgroundImage = `url(${this.loadedImageUrl})`
       }
 
+      return style
+    },
+
+    backgroundBlurStyle () {
+      let style = {}
+      if (this.loadedImageUrl) {
+        style.backgroundImage = `url(${this.loadedImageUrl})`
+      }
+
       return style
     }
   },
@@ -95,6 +104,7 @@ export default {
   height: 100%;
   top: 0;
   left: 0;
+  overflow: hidden;
 }
 
 .background-img {
@@ -103,17 +113,60 @@ export default {
   opacity: 1;
 }
 
+.background-default {
+  $shadow-opacity: .6;
+  background:
+    linear-gradient(
+      to right,
+      rgba($color__neutral-100, $shadow-opacity),
+      rgba($color__neutral-100, 0) 20%,
+      rgba($color__neutral-100, 0) 80%,
+      rgba($color__neutral-100, $shadow-opacity)
+    ),
+    linear-gradient(
+      to bottom,
+      rgba($color__neutral-100, $shadow-opacity),
+      rgba($color__neutral-100, 0) 20%,
+      rgba($color__neutral-100, 0) 80%,
+      rgba($color__neutral-100, $shadow-opacity)
+    ),
+    linear-gradient(
+      to top,
+      $color__neutral-100,
+      $color__primary-300
+  )
+  ;
+  overflow: hidden;
+}
+
+.background-blur {
+  filter: blur(30px);
+}
+
 .fade {
+  $timing: .7;
   &-enter-active {
-    transition: opacity 2s 1s;
+    transition: opacity 4s * $timing 1s * $timing ease-in;
   }
 
   &-leave-active {
-    transition: opacity 3s;
+    transition: opacity 2s * $timing ease-out;
   }
 
   &-enter, &-leave-to {
     opacity: 0;
   }
 }
+
+.fade-fast {
+  $timing: 1;
+  &-enter-active {
+    transition: opacity 3s * $timing ease-in;
+    transition-delay: .2s;
+  }
+
+  &-enter {
+    opacity: 0;
+  }
+}
 </style>

pages/index.vue

@@ -60,7 +60,7 @@ export default {
     handleImageLoaded () {
       window.setTimeout(() => {
         this.setNextIndex()
-      }, 3000)
+      }, 6000)
     },
 
     handleImageLoadError () {