feat(ImagePreview): add transition prop (#8273)

src/image-preview/ImagePreview.js

@@ -48,6 +48,10 @@ export default createComponent({
       type: [Number, String],
       default: 3,
     },
+    transition: {
+      type: String,
+      default: 'van-fade',
+    },
     showIndex: {
       type: Boolean,
       default: true,
@@ -216,7 +220,7 @@ export default createComponent({
     }
 
     return (
-      <transition name="van-fade" onAfterLeave={this.onClosed}>
+      <transition name={this.transition} onAfterLeave={this.onClosed}>
         <div vShow={this.value} class={[bem(), this.className]}>
           {this.genClose()}
           {this.genImages()}

src/image-preview/README.md

@@ -129,6 +129,7 @@ export default {
 | closeable `v2.5.0` | Whether to show close icon | _boolean_ | `false` |
 | closeIcon `v2.5.0` | Close icon name | _string_ | `clear` |
 | closeIconPosition `v2.5.0` | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
+| transition `v2.12.8` | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | _string_ | `van-fade` |
 | getContainer | Return the mount node for ImagePreview | _string \| () => Element_ | - |
 
 ### Props
@@ -149,6 +150,7 @@ export default {
 | closeable `v2.5.0` | Whether to show close icon | _boolean_ | `false` |
 | close-icon `v2.5.0` | Close icon name | _string_ | `clear` |
 | close-icon-position `v2.5.0` | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
+| transition `v2.12.8` | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | _string_ | `van-fade` |
 | get-container | Return the mount node for ImagePreview | _string \| () => Element_ | - |
 
 ### Events

src/image-preview/README.zh-CN.md

@@ -165,6 +165,7 @@ export default {
 | closeable `v2.5.0` | 是否显示关闭图标 | _boolean_ | `false` |
 | closeIcon `v2.5.0` | 关闭图标名称或图片链接 | _string_ | `clear` |
 | closeIconPosition `v2.5.0` | 关闭图标位置，可选值为`top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
+| transition `v2.12.8` | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的 `name` 属性 | _string_ | `van-fade` |
 | getContainer | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
 
 ### Props
@@ -187,6 +188,7 @@ export default {
 | closeable `v2.5.0` | 是否显示关闭图标 | _boolean_ | `false` |
 | close-icon `v2.5.0` | 关闭图标名称或图片链接 | _string_ | `clear` |
 | close-icon-position `v2.5.0` | 关闭图标位置，可选值为`top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
+| transition `v2.12.8` | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的 `name` 属性 | _string_ | `van-fade` |
 | get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
 
 ### Events

src/image-preview/index.js

@@ -17,6 +17,7 @@ const defaultConfig = {
   closeable: false,
   closeIcon: 'clear',
   asyncClose: false,
+  transition: 'van-fade',
   getContainer: 'body',
   startPosition: 0,
   swipeDuration: 300,

types/image-preview.d.ts

@@ -14,6 +14,7 @@ export type ImagePreviewOptions =
       closeable?: boolean;
       closeIcon?: string;
       asyncClose?: boolean;
+      transition?: string;
       swipeDuration?: number;
       startPosition?: number;
       showIndicators?: boolean;