Merge pull request #8 from krystalcampioni/improve_transitions_between_images

Improve transitions between images

Author: pexea12

src/components/style.css

@@ -220,6 +220,10 @@ img.vue-lb-modal-image {
   right: 10px;
 }
 
+.vue-lb-open {
+  overflow: hidden;
+}
+
 @media (min-width: 500px) {
   .vue-lb-thumbnail-arrow {
     width: 40px;
@@ -232,7 +236,11 @@ img.vue-lb-modal-image {
   }
 }
 
-.vue-lb-open {
-  overflow: hidden;
+.fade-enter-active, 
+.fade-leave-active {
+  transition: opacity .3s ease;
 }
 
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}

src/components/template.html

@@ -26,10 +26,13 @@
 
     </div> <!-- .vue-lb-header -->
     <div class="vue-lb-figure">
-      <img 
-        v-lazy="imagesSrc[select]"
-        class="vue-lb-modal-image"
-      >
+       <transition mode="out-in" name="fade">
+           <img 
+             :key="imagesSrc[select].src"
+             :src="imagesSrc[select].src"
+             class="vue-lb-modal-image"
+           >
+       </transition>
 
       <div 
         class="vue-lb-info" 
@@ -63,7 +66,7 @@
 
     <div 
       v-for="(image, index) in imagesThumb" 
-      :key="image.src + index"
+      :key="index"
       :class="'vue-lb-modal-thumbnail' + (thumbSelect === index ? '-active' : '')" 
       v-lazy:background-image="image"
       @click="showImage(index + beginThumbIndex)"
@@ -109,5 +112,4 @@
       </svg>
     </span>
   </button>
-</div> <!-- .vue-lb-container -->
-    
+</div> <!-- .vue-lb-container -->