From 3e2ff82afe6eba94e6823514ef1081d65f0e6959 Mon Sep 17 00:00:00 2001
From: ManjaroOne666 <git@gabbaell.co.uk>
Date: Sun, 13 Jan 2019 20:22:02 +0000
Subject: [PATCH] better transitions

---
 components/GalleryImageViewer.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/GalleryImageViewer.vue b/components/GalleryImageViewer.vue
index c8fb1f4..20f3205 100644
--- a/components/GalleryImageViewer.vue
+++ b/components/GalleryImageViewer.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="image-viewer"
        :class="{ 'is-visible': isVisible }">
-    <transition name="trans-bg-image" mode="out-in">
-      <div v-if="backgroundImageUrl" :key="backgroundImageUrl" class="viewer-background" :style="backgroundStyle"></div>
+    <transition name="trans-bg-image">
+      <div v-if="backgroundImageUrl !== null" :key="backgroundImageUrl" class="viewer-background" :style="backgroundStyle"></div>
     </transition>
     <div class="image-container">
       <transition name="trans-bg-image">
-        <img v-if="showLoading" class="image" :src="loadingImageUrl">
+        <img v-if="showLoading !== null" class="image" :src="loadingImageUrl">
       </transition>
     </div>
     <div class="image-container">
       <transition name="trans-image" mode="out-in">
-        <img v-if="displayImageUrl" :key="displayImageUrl" class="image" :src="displayImageUrl">
+        <img v-if="displayImageUrl !== null" :key="displayImageUrl" class="image" :src="displayImageUrl">
       </transition>
     </div>
     <div class="close-viewer mobile-only"
@@ -223,7 +223,7 @@ export default {
 
 .trans-image {
   &-enter-active, &-leave-active {
-    transition: opacity .5s;
+    transition: opacity 1s;
   }
 
   &-enter, &-leave-to {
@@ -233,7 +233,7 @@ export default {
 
 .trans-bg-image {
   &-enter-active, &-leave-active {
-    transition: opacity .3s;
+    transition: opacity .8s;
   }
 
   &-enter, &-leave-to {