From 12dbaa56ce5b00884c6c207325e5dcd4ad845008 Mon Sep 17 00:00:00 2001
From: rex <rexkaneki@gmail.com>
Date: Tue, 12 Mar 2019 21:40:15 +0800
Subject: [PATCH] [bugfix] Transition: overlay still show after closed (#1404)

fix #1377

+ Transition: fix overlay still show after closed
+ Dialog: add new transition none
---
 example/pages/dialog/index.wxml |  1 +
 packages/dialog/README.md       | 12 +--------
 packages/mixins/transition.ts   | 47 ++++++++++++++++++++-------------
 packages/popup/index.less       | 11 ++++++++
 packages/popup/index.ts         |  4 ---
 packages/popup/index.wxml       |  2 +-
 6 files changed, 42 insertions(+), 35 deletions(-)

diff --git a/example/pages/dialog/index.wxml b/example/pages/dialog/index.wxml
index 74c0c2c7..cf4d1ad6 100644
--- a/example/pages/dialog/index.wxml
+++ b/example/pages/dialog/index.wxml
@@ -39,6 +39,7 @@
     async-close
     show="{{ show }}"
     show-cancel-button
+    transition="fade"
     bind:close="onClose"
     confirm-button-open-type="getUserInfo"
     bind:getuserinfo="getUserInfo"
diff --git a/packages/dialog/README.md b/packages/dialog/README.md
index a3f93a90..b366062e 100644
--- a/packages/dialog/README.md
+++ b/packages/dialog/README.md
@@ -140,7 +140,7 @@ Page({
 | closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` |
 | asyncClose | 是否异步关闭弹窗，开启后需要手动控制弹窗的关闭 | `Boolean` | `false` |
 | context | 选择器的选择范围，可以传入自定义组件的 this 作为上下文 | `Object` | 当前页面 |
-| transition | 动画名称，可选值为`fade` | `String` | `scale` |
+| transition | 动画名称，可选值为`fade` `none` | `String` | `scale` |
 | app-parameter | 打开 APP 时，向 APP 传递的参数 | `String` | - | `confirmButtonOpenType="launchApp"` |
 | lang | 指定返回用户信息的语言，zh_CN 简体中文，<br>zh_TW 繁体中文，en 英文 | `String` | `en` | `confirmButtonOpenType="getUserInfo"` |
 | session-from | 会话来源 | `String` | - | `confirmButtonOpenType="contact"` |
@@ -192,13 +192,3 @@ Page({
 | bind:getphonenumber | 获取用户手机号回调 | - |
 | bind:error | 当使用开放能力时，发生错误的回调 | - |
 | bind:opensetting | 在打开授权设置页后回调 | - |
-
-### 更新日志
-
-| 版本 | 类型 | 内容 |
-|-----------|-----------|-----------|
-| 0.3.0 | feature | 新增组件 |
-| 0.3.2 | improvement | 新增弹出动画 |
-| 0.3.2 | feature | 新增 z-index 属性 |
-| 0.3.3 | bugfix | 修复 Promise 状态错误的问题 |
-| 0.3.4 | feature | 支持 open-type 回调事件 |
diff --git a/packages/mixins/transition.ts b/packages/mixins/transition.ts
index 9349def7..a5260efe 100644
--- a/packages/mixins/transition.ts
+++ b/packages/mixins/transition.ts
@@ -7,7 +7,7 @@ const getClassNames = (name: string) => ({
   'leave-to': `van-${name}-leave-to van-${name}-leave-active leave-to-class leave-active-class`
 });
 
-const requestAnimationFrame = (cb: Function) => setTimeout(cb, 1000 / 60);
+const nextTick = () => new Promise(resolve => setTimeout(resolve, 1000 / 30));
 
 export const transition = function(showDefaultValue: boolean) {
   return Behavior({
@@ -61,38 +61,47 @@ export const transition = function(showDefaultValue: boolean) {
       show() {
         const { classNames, duration } = this.data;
 
-        this.set({
-          inited: true,
-          display: true,
-          classes: classNames.enter,
-          currentDuration: isObj(duration) ? duration.enter : duration
-        }).then(() => {
-          requestAnimationFrame(() => {
+        Promise.resolve()
+          .then(nextTick)
+          .then(() =>
+            this.set({
+              inited: true,
+              display: true,
+              classes: classNames.enter,
+              currentDuration: isObj(duration) ? duration.enter : duration
+            })
+          )
+          .then(nextTick)
+          .then(() =>
             this.set({
               classes: classNames['enter-to']
-            });
-          });
-        });
+            })
+          );
       },
 
       leave() {
         const { classNames, duration } = this.data;
 
-        this.set({
-          classes: classNames.leave,
-          currentDuration: isObj(duration) ? duration.leave : duration
-        }).then(() => {
-          requestAnimationFrame(() => {
+        Promise.resolve()
+          .then(nextTick)
+          .then(() =>
+            this.set({
+              classes: classNames.leave,
+              currentDuration: isObj(duration) ? duration.leave : duration
+            })
+          )
+          .then(nextTick)
+          .then(() =>
             this.set({
               classes: classNames['leave-to']
-            });
-          });
-        });
+            })
+          );
       },
 
       onTransitionEnd() {
         if (!this.data.show) {
           this.set({ display: false });
+          this.$emit('transitionEnd');
         }
       }
     }
diff --git a/packages/popup/index.less b/packages/popup/index.less
index 8eb1343e..c7a641f5 100644
--- a/packages/popup/index.less
+++ b/packages/popup/index.less
@@ -116,3 +116,14 @@
 .van-right-leave-to {
   transform: translate3d(100%, -50%, 0);
 }
+
+.van-none-enter-active,
+.van-none-leave-active {
+  transition-duration: 1ms !important;
+  transition-property: opacity;
+}
+
+.van-none-enter,
+.van-none-leave-to {
+  opacity: 0.999;
+}
diff --git a/packages/popup/index.ts b/packages/popup/index.ts
index e295af84..4d12fad2 100644
--- a/packages/popup/index.ts
+++ b/packages/popup/index.ts
@@ -53,10 +53,6 @@ VantComponent({
       }
     },
 
-    onTransitionEnd() {
-      !this.data.show && this.$emit('transitionEnd');
-    },
-
     observeClass() {
       const { transition, position } = this.data;
       this.updateClasses(transition || position);
diff --git a/packages/popup/index.wxml b/packages/popup/index.wxml
index 6d38e13b..5ef216c3 100644
--- a/packages/popup/index.wxml
+++ b/packages/popup/index.wxml
@@ -6,7 +6,7 @@
   show="{{ show }}"
   z-index="{{ zIndex }}"
   custom-style="{{ overlayStyle }}"
-  duration="{{ duration }}"
+  duration="{{ transition === 'none' ? 1 : duration }}"
   bind:click="onClickOverlay"
 />
 <view