[new feature] Popup: add duration prop

docs/markdown/v2-progress-tracking.md

@@ -73,6 +73,7 @@
 ### Popup
 
 - 新增`click`事件
+- 新增`duration`属性
 
 ### Loading
 

packages/popup/en-US.md

@@ -48,6 +48,7 @@ Use `position` prop to set popup display position
 | overlay-style | Custom overlay style | `Object` | - |
 | close-on-click-overlay | Close popup when click overlay | `Boolean` | `true` |
 | transition | Transition | `String` | `popup-slide` |
+| duration | Transition duration, unit second | `Number` | `0.3` |
 | lock-scroll | Whether to lock background scroll | `Boolean` | `true` |
 | lazy-render | Whether to lazy render util appeared | `Boolean` | `true` |
 | get-container | Return the mount node for Popup | `String | () => HTMLElement` | - |

packages/popup/index.js

@@ -1,4 +1,4 @@
-import { use } from '../utils';
+import { use, isDef } from '../utils';
 import { PopupMixin } from '../mixins/popup';
 
 const [sfc, bem] = use('popup');
@@ -8,6 +8,10 @@ export default sfc({
 
   props: {
     transition: String,
+    duration: {
+      type: Number,
+      default: null
+    },
     position: {
       type: String,
       default: 'center'
@@ -27,12 +31,18 @@ export default sfc({
       return;
     }
 
-    const { position } = this;
+    const { position, duration } = this;
     const emit = eventName => event => this.$emit(eventName, event);
+
     const transitionName =
       this.transition ||
       (position === 'center' ? 'van-fade' : `van-popup-slide-${position}`);
 
+    const style = {};
+    if (isDef(duration)) {
+      style.transitionDuration = `${duration}s`;
+    }
+
     return (
       <transition
         name={transitionName}
@@ -41,6 +51,7 @@ export default sfc({
       >
         <div
           vShow={this.value}
+          style={style}
           class={bem({ [position]: position })}
           onClick={emit('click')}
         >

packages/popup/test/__snapshots__/index.spec.js.snap

@@ -1,3 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`duration prop 1`] = `<div class="van-popup van-popup--center" style="transition-duration: 0.5s;" name="van-fade"></div>`;
+
 exports[`reset z-index 1`] = `<div class="van-popup van-popup--center" name="van-fade"></div>`;

packages/popup/test/index.spec.js

@@ -200,3 +200,14 @@ test('click event', () => {
   wrapper.trigger('click');
   expect(wrapper.emitted('click')).toBeTruthy();
 });
+
+test('duration prop', () => {
+  const wrapper = mount(Popup, {
+    propsData: {
+      value: true,
+      duration: 0.5
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});

packages/popup/zh-CN.md

@@ -47,6 +47,7 @@ export default {
 | overlay-class | 自定义蒙层类名 | `String` | - | - |
 | overlay-style | 自定义蒙层样式 | `Object` | - | - |
 | transition | 动画类名，用法与原生`transtion`组件的`name`属性一致 | `String` | - | - |
+| duration | 动画时长，单位秒 | `Number` | `0.3` | 2.0.0 |
 | get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | `String | () => HTMLElement` | - | - |
 | close-on-click-overlay | 是否在点击蒙层后关闭 | `Boolean` | `true` | - |
 | lock-scroll | 是否锁定背景滚动 | `Boolean` | `true` | 1.0.0 |