From 9c9642ee1faa6efd15c0c9535e4c199499a83fe9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Mon, 6 May 2019 17:01:51 +0800
Subject: [PATCH] [new feature] Popup: add duration prop

---
 docs/markdown/v2-progress-tracking.md             |  1 +
 packages/popup/en-US.md                           |  1 +
 packages/popup/index.js                           | 15 +++++++++++++--
 .../popup/test/__snapshots__/index.spec.js.snap   |  2 ++
 packages/popup/test/index.spec.js                 | 11 +++++++++++
 packages/popup/zh-CN.md                           |  1 +
 6 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/docs/markdown/v2-progress-tracking.md b/docs/markdown/v2-progress-tracking.md
index f0a73bdee..91506ddc9 100644
--- a/docs/markdown/v2-progress-tracking.md
+++ b/docs/markdown/v2-progress-tracking.md
@@ -73,6 +73,7 @@
 ### Popup
 
 - 新增`click`事件
+- 新增`duration`属性
 
 ### Loading
 
diff --git a/packages/popup/en-US.md b/packages/popup/en-US.md
index 622c32ee0..5911495e8 100644
--- a/packages/popup/en-US.md
+++ b/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` | - |
diff --git a/packages/popup/index.js b/packages/popup/index.js
index 3043f6dbc..51e5cb21d 100644
--- a/packages/popup/index.js
+++ b/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')}
         >
diff --git a/packages/popup/test/__snapshots__/index.spec.js.snap b/packages/popup/test/__snapshots__/index.spec.js.snap
index 697eb56f1..77e4bf65e 100644
--- a/packages/popup/test/__snapshots__/index.spec.js.snap
+++ b/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>`;
diff --git a/packages/popup/test/index.spec.js b/packages/popup/test/index.spec.js
index bff8450b8..fa821a14e 100644
--- a/packages/popup/test/index.spec.js
+++ b/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();
+});
diff --git a/packages/popup/zh-CN.md b/packages/popup/zh-CN.md
index dc387c4a6..20067d665 100644
--- a/packages/popup/zh-CN.md
+++ b/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 |