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

src/image-preview/ImagePreview.tsx

@@ -25,6 +25,7 @@ export default createComponent({
   props: {
     show: Boolean,
     closeable: Boolean,
+    transition: String,
     className: UnknownProp,
     beforeClose: Function as PropType<Interceptor>,
     showIndicators: Boolean,
@@ -218,6 +219,7 @@ export default createComponent({
       <Popup
         show={props.show}
         class={[bem(), props.className]}
+        transition={props.transition}
         overlayClass={bem('overlay')}
         closeOnPopstate={props.closeOnPopstate}
         onClosed={onClosed}

src/image-preview/README.md

@@ -139,6 +139,7 @@ export default {
 | closeable | Whether to show close icon | _boolean_ | `false` |
 | closeIcon | Close icon name | _string_ | `clear` |
 | closeIconPosition | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
+| transition `v3.0.8` | Transition, equivalent to `name` prop of [transtion](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | `van-fade` |
 | teleport | Return the mount node for ImagePreview | _string \| Element_ | - |
 
 ### Props
@@ -159,6 +160,7 @@ export default {
 | closeable | Whether to show close icon | _boolean_ | `false` |
 | close-icon | Close icon name | _string_ | `clear` |
 | close-icon-position | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
+| transition `v3.0.8` | Transition, equivalent to `name` prop of [transtion](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | `van-fade` |
 | teleport | Return the mount node for ImagePreview | _string \| Element_ | - |
 
 ### Events

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

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

src/image-preview/index.tsx

@@ -17,6 +17,7 @@ export type ImagePreviewOptions = {
   showIndex?: boolean;
   closeable?: boolean;
   closeIcon?: string;
+  transition?: string;
   beforeClose?: Interceptor;
   swipeDuration?: number;
   startPosition?: number;
@@ -41,6 +42,7 @@ const defaultConfig: ImagePreviewOptions = {
   showIndex: true,
   closeable: false,
   closeIcon: 'clear',
+  transition: undefined,
   beforeClose: undefined,
   startPosition: 0,
   swipeDuration: 300,