From 7d29ae8a2d0282692e9759b1811743dab1c1e134 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Mon, 24 Jun 2019 11:43:34 +0800
Subject: [PATCH] [improvement] Popup: optimize overlay animation duration
 (#3610)

---
 .../test/__snapshots__/index.spec.js.snap         | 10 +++++-----
 packages/mixins/popup/index.js                    |  5 +++--
 packages/overlay/index.tsx                        | 15 ++++++++++++---
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/packages/dropdown-menu/test/__snapshots__/index.spec.js.snap b/packages/dropdown-menu/test/__snapshots__/index.spec.js.snap
index a0c2a521b..35ac9efe9 100644
--- a/packages/dropdown-menu/test/__snapshots__/index.spec.js.snap
+++ b/packages/dropdown-menu/test/__snapshots__/index.spec.js.snap
@@ -37,7 +37,7 @@ exports[`close on click outside 1`] = `
         <div class="van-cell__title"><span>B</span></div>
       </div>
     </div>
-    <div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2004; z-index: 2004; position: absolute;"></div>
+    <div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2004; z-index: 2004; position: absolute; animation-duration: 0.2s;"></div>
   </div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
     <!---->
@@ -83,7 +83,7 @@ exports[`direction up 1`] = `
         <div class="van-cell__title"><span>B</span></div>
       </div>
     </div>
-    <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2006; z-index: 2006; position: absolute;"></div>
+    <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2006; z-index: 2006; position: absolute; animation-duration: 0.2s;"></div>
   </div>
   <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 768px; display: none;">
     <!---->
@@ -115,7 +115,7 @@ exports[`show dropdown item 1`] = `
         <div class="van-cell__title"><span>B</span></div>
       </div>
     </div>
-    <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2000; z-index: 2000; position: absolute;"></div>
+    <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2000; z-index: 2000; position: absolute; animation-duration: 0.2s;"></div>
   </div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
     <!---->
@@ -150,7 +150,7 @@ exports[`show dropdown item 2`] = `
         <div class="van-cell__title"><span>B</span></div>
       </div>
     </div>
-    <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2001; z-index: 2001; position: absolute;"></div>
+    <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2001; z-index: 2001; position: absolute; animation-duration: 0.2s;"></div>
   </div>
 </div>
 `;
@@ -182,7 +182,7 @@ exports[`show dropdown item 3`] = `
         <div class="van-cell__title"><span>B</span></div>
       </div>
     </div>
-    <div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2001; z-index: 2001; position: absolute;"></div>
+    <div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2001; z-index: 2001; position: absolute; animation-duration: 0.2s;"></div>
   </div>
 </div>
 `;
diff --git a/packages/mixins/popup/index.js b/packages/mixins/popup/index.js
index fccf74476..5670ee408 100644
--- a/packages/mixins/popup/index.js
+++ b/packages/mixins/popup/index.js
@@ -73,8 +73,8 @@ export const PopupMixin = {
     }
   },
 
+  /* istanbul ignore next */
   activated() {
-    /* istanbul ignore next */
     if (this.value) {
       this.open();
     }
@@ -88,8 +88,8 @@ export const PopupMixin = {
     }
   },
 
+  /* istanbul ignore next */
   deactivated() {
-    /* istanbul ignore next */
     this.close();
   },
 
@@ -171,6 +171,7 @@ export const PopupMixin = {
       if (this.overlay) {
         openOverlay(this, {
           zIndex: context.zIndex++,
+          duration: this.duration,
           className: this.overlayClass,
           customStyle: this.overlayStyle
         });
diff --git a/packages/overlay/index.tsx b/packages/overlay/index.tsx
index 73c835492..a7f9b78ea 100644
--- a/packages/overlay/index.tsx
+++ b/packages/overlay/index.tsx
@@ -1,4 +1,4 @@
-import { use } from '../utils';
+import { use, isDef } from '../utils';
 import { inherit } from '../utils/functional';
 import { preventDefault } from '../utils/dom/event';
 
@@ -10,6 +10,7 @@ export type OverlayProps = {
   zIndex?: number;
   className?: any;
   visible?: boolean;
+  duration: number | null;
   customStyle?: object;
 };
 
@@ -29,11 +30,15 @@ function Overlay(
   slots: DefaultSlots,
   ctx: RenderContext<OverlayProps>
 ) {
-  const style = {
+  const style: { [key: string]: any } = {
     zIndex: props.zIndex,
     ...props.customStyle
   };
 
+  if (isDef(props.duration)) {
+    style.animationDuration = `${props.duration}s`;
+  }
+
   return (
     <transition name="van-fade">
       <div
@@ -51,7 +56,11 @@ Overlay.props = {
   zIndex: Number,
   className: null as any,
   visible: Boolean,
-  customStyle: Object
+  customStyle: Object,
+  duration: {
+    type: Number,
+    default: null
+  }
 };
 
 export default sfc<OverlayProps, OverlayEvents>(Overlay);