From 8f34dc75d23f07dcdebb8621d6131d1042ebedc6 Mon Sep 17 00:00:00 2001
From: ManjaroOne666 <git@gabbaell.co.uk>
Date: Sun, 13 Jan 2019 20:11:19 +0000
Subject: [PATCH] background image transition working

---
 components/GalleryImageViewer.vue | 29 ++++++++++++++++-------------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/components/GalleryImageViewer.vue b/components/GalleryImageViewer.vue
index c981201..c8fb1f4 100644
--- a/components/GalleryImageViewer.vue
+++ b/components/GalleryImageViewer.vue
@@ -2,7 +2,7 @@
   <div class="image-viewer"
        :class="{ 'is-visible': isVisible }">
     <transition name="trans-bg-image" mode="out-in">
-      <div v-show="backgroundImageUrl" class="viewer-background" :style="backgroundStyle"></div>
+      <div v-if="backgroundImageUrl" :key="backgroundImageUrl" class="viewer-background" :style="backgroundStyle"></div>
     </transition>
     <div class="image-container">
       <transition name="trans-bg-image">
@@ -221,20 +221,23 @@ export default {
   }
 }
 
-.trans-image-enter-active, .trans-image-leave-active {
-  transition: opacity 5s;
+.trans-image {
+  &-enter-active, &-leave-active {
+    transition: opacity .5s;
+  }
+
+  &-enter, &-leave-to {
+    opacity: 0;
+  }
 }
 
-.trans-image-enter, .trans-image-leave-to {
-  opacity: 0;
-}
+.trans-bg-image {
+  &-enter-active, &-leave-active {
+    transition: opacity .3s;
+  }
 
-
-.trans-bg-image-enter-active, .trans-bg-image-leave-active {
-  transition: opacity 1s;
-}
-
-.trans-bg-image-enter, .trans-bg-image-leave-to {
-  opacity: 0;
+  &-enter, &-leave-to {
+    opacity: 0;
+  }
 }
 </style>