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

This commit is contained in:
neverland 2018-12-01 08:46:42 +08:00 committed by GitHub
parent 66c940d672
commit d14f9cb5dc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 41 additions and 37 deletions

View File

@ -1,4 +1,5 @@
<template> <template>
<transition name="van-fade">
<div <div
v-if="value" v-if="value"
:class="b()" :class="b()"
@ -36,6 +37,7 @@
</swipe-item> </swipe-item>
</swipe> </swipe>
</div> </div>
</transition>
</template> </template>
<script> <script>
@ -176,7 +178,7 @@ export default create({
onTouchStart(event) { onTouchStart(event) {
const { touches } = event; const { touches } = event;
const { offsetX } = this.$refs.swipe; const { offsetX = 0 } = this.$refs.swipe || {};
if (touches.length === 1 && this.scale !== 1) { if (touches.length === 1 && this.scale !== 1) {
this.startMove(event); this.startMove(event);

View File

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

View File

@ -1,7 +1,9 @@
import Vue from 'vue'; import Vue from 'vue';
import ImagePreview from '..'; import ImagePreview from '..';
import ImagePreviewVue from '../ImagePreview'; 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) { function triggerZoom(el, x, y) {
trigger(el, 'touchstart', 0, 0, { x, y }); trigger(el, 'touchstart', 0, 0, { x, y });