feat(Dialog): add transition prop (#4636)

src/dialog/Dialog.js

@@ -21,6 +21,10 @@ export default createComponent({
     confirmButtonText: String,
     confirmButtonColor: String,
     showCancelButton: Boolean,
+    transition: {
+      type: String,
+      default: 'van-dialog-bounce'
+    },
     showConfirmButton: {
       type: Boolean,
       default: true
@@ -140,7 +144,7 @@ export default createComponent({
 
     return (
       <transition
-        name="van-dialog-bounce"
+        name={this.transition}
         onAfterEnter={this.onOpened}
         onAfterLeave={this.onClosed}
       >

src/dialog/README.md

@@ -133,6 +133,7 @@ export default {
 | closeOnClickOverlay | Whether to close when click overlay | *boolean* | `false` | - |
 | lockScroll | Whether to lock body scroll | *boolean* | `true` | - |
 | beforeClose | Callback before close,<br>call done() to close dialog,<br>call done(false) to cancel loading | (action: string, done: Function) => void | - | - |
+| transition | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | *string* | - | 2.2.6 |
 | getContainer | Return the mount node for Dialog | *string \| () => Element* | `body` | - |
 
 ### Props
@@ -154,6 +155,7 @@ export default {
 | close-on-click-overlay | Whether to close when click overlay | *boolean* | `false` | - |
 | lock-scroll | Whether to lock background scroll | *boolean* | `true` | - |
 | before-close | Callback before close,<br>call done() to close dialog,<br>call done(false) to cancel loading | (action: string, done: Function) => void | - | - |
+| transition | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | *string* | - | 2.2.6 |
 | get-container | Return the mount node for Dialog | *string \| () => Element* | - | - |
 
 ### Events

src/dialog/README.zh-CN.md

@@ -162,6 +162,7 @@ export default {
 | closeOnClickOverlay | 是否在点击遮罩层后关闭弹窗 | *boolean* | `false` | - |
 | lockScroll | 是否锁定背景滚动 | *boolean* | `true` | - |
 | beforeClose | 关闭前的回调函数，<br>调用 done() 后关闭弹窗，<br>调用 done(false) 阻止弹窗关闭 | *(action, done) => void* | - | - |
+| transition | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | *string* | - | 2.2.6 |
 | getContainer | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | *string \| () => Element* | `body` | - |
 
 ### Props
@@ -185,6 +186,7 @@ export default {
 | close-on-click-overlay | 是否在点击遮罩层后关闭弹窗 | *boolean* | `false` | - |
 | lock-scroll | 是否锁定背景滚动 | *boolean* | `true` | - |
 | before-close | 关闭前的回调函数，<br>调用 done() 后关闭弹窗，<br>调用 done(false) 阻止弹窗关闭 | *(action, done) => void* | - | - |
+| transition | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | *string* | - | 2.2.6 |
 | get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | *string \| () => Element* | - | - |
 
 ### Events

src/dialog/index.js

@@ -51,6 +51,7 @@ Dialog.defaultOptions = {
   overlay: true,
   className: '',
   lockScroll: true,
+  transition: 'van-dialog-bounce',
   beforeClose: null,
   messageAlign: '',
   getContainer: 'body',

types/dialog.d.ts

@@ -7,6 +7,7 @@ export type DialogOptions = {
   overlay?: boolean;
   className?: any;
   lockScroll?: boolean;
+  transition?: string;
   messageAlign?: string;
   closeOnPopstate?: boolean;
   cancelButtonText?: string;