feat(Toast): add transition option (#4638)

src/toast/README.md

@@ -127,4 +127,5 @@ toast2.clear();
 | className | Custom className | *any* | - | - |
 | onOpened | Callback function after opened | *Function* | - | - |
 | onClose | Callback function after close | *Function* | - | - |
+| transition | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | *string* | - | 2.2.6 |
 | getContainer | Return the mount node for Toast | *string \| () => Element* | `body` | - |

src/toast/README.zh-CN.md

@@ -127,4 +127,5 @@ toast2.clear();
 | className | 自定义类名 | *any* | - | - |
 | onOpened | 完全展示后的回调函数 | *Function* | - | - |
 | onClose | 关闭时的回调函数 | *Function* | - | - |
+| transition | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | *string* | - | 2.2.6 |
 | getContainer | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | *string \| () => Element* | `body` | - |

src/toast/Toast.js

@@ -24,6 +24,10 @@ export default createComponent({
       type: String,
       default: 'middle'
     },
+    transition: {
+      type: String,
+      default: 'van-fade'
+    },
     lockScroll: {
       type: Boolean,
       default: false
@@ -109,7 +113,7 @@ export default createComponent({
 
     return (
       <transition
-        name="van-fade"
+        name={this.transition}
         onAfterEnter={this.onAfterEnter}
         onAfterLeave={this.onAfterLeave}
       >

src/toast/index.js

@@ -14,6 +14,7 @@ const defaultOptions = {
   duration: 3000,
   iconPrefix: undefined,
   position: 'middle',
+  transition: 'van-fade',
   forbidClick: false,
   loadingType: undefined,
   getContainer: 'body',

types/toast.d.ts

@@ -7,15 +7,16 @@ export type ToastOptions = {
   icon?: string;
   type?: string;
   mask?: boolean;
-  position?: string;
+  message?: ToastMessage;
+  onClose?: () => void;
+  onOpened?: () => void;
   duration?: number;
+  position?: string;
   className?: any;
-  onClose?(): void;
+  transition?: string;
-  onOpened?(): void;
+  loadingType?: string;
   forbidClick?: boolean;
   closeOnClick?: boolean;
-  loadingType?: string;
-  message?: ToastMessage;
   getContainer?: string | (() => Element);
 };