[improvement] ImagePreview: add fade transition (#2196)

packages/image-preview/ImagePreview.vue

@@ -1,41 +1,43 @@
 <template>
-  <div
-    v-if="value"
-    :class="b()"
-    @touchstart="onWrapperTouchStart"
-    @touchend="onWrapperTouchEnd"
-    @touchcancel="onWrapperTouchEnd"
-  >
+  <transition name="van-fade">
     <div
-      v-if="showIndex"
-      :class="b('index')"
+      v-if="value"
+      :class="b()"
+      @touchstart="onWrapperTouchStart"
+      @touchend="onWrapperTouchEnd"
+      @touchcancel="onWrapperTouchEnd"
     >
-      {{ active + 1 }}/{{ count }}
-    </div>
-    <swipe
-      ref="swipe"
-      :loop="loop"
-      indicator-color="white"
-      :initial-swipe="startPosition"
-      :show-indicators="showIndicators"
-      @change="onChange"
-    >
-      <swipe-item
-        v-for="(item, index) in images"
-        :key="index"
+      <div
+        v-if="showIndex"
+        :class="b('index')"
       >
-        <img
-          :class="b('image')"
-          :src="item"
-          :style="index === active ? imageStyle : null"
-          @touchstart="onTouchStart"
-          @touchmove="onTouchMove"
-          @touchend="onTouchEnd"
-          @touchcancel="onTouchEnd"
+        {{ active + 1 }}/{{ count }}
+      </div>
+      <swipe
+        ref="swipe"
+        :loop="loop"
+        indicator-color="white"
+        :initial-swipe="startPosition"
+        :show-indicators="showIndicators"
+        @change="onChange"
+      >
+        <swipe-item
+          v-for="(item, index) in images"
+          :key="index"
         >
-      </swipe-item>
-    </swipe>
-  </div>
+          <img
+            :class="b('image')"
+            :src="item"
+            :style="index === active ? imageStyle : null"
+            @touchstart="onTouchStart"
+            @touchmove="onTouchMove"
+            @touchend="onTouchEnd"
+            @touchcancel="onTouchEnd"
+          >
+        </swipe-item>
+      </swipe>
+    </div>
+  </transition>
 </template>
 
 <script>
@@ -176,7 +178,7 @@ export default create({
 
     onTouchStart(event) {
       const { touches } = event;
-      const { offsetX } = this.$refs.swipe;
+      const { offsetX = 0 } = this.$refs.swipe || {};
 
       if (touches.length === 1 && this.scale !== 1) {
         this.startMove(event);

packages/image-preview/test/__snapshots__/index.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`render image 1`] = `
-<div class="van-image-preview">
+<div class="van-image-preview" name="van-fade">
   <div class="van-image-preview__index">
     1/3
   </div>
@@ -23,7 +23,7 @@ exports[`render image 1`] = `
 `;
 
 exports[`zoom 1`] = `
-<div class="van-image-preview">
+<div class="van-image-preview" name="van-fade">
   <div class="van-image-preview__index">
     1/3
   </div>

packages/image-preview/test/index.spec.js

@@ -1,7 +1,9 @@
 import Vue from 'vue';
 import ImagePreview from '..';
 import ImagePreviewVue from '../ImagePreview';
-import { mount, trigger, triggerDrag } from '../../../test/utils';
+import { mount, trigger, triggerDrag, transitionStub } from '../../../test/utils';
+
+transitionStub();
 
 function triggerZoom(el, x, y) {
   trigger(el, 'touchstart', 0, 0, { x, y });