[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

@@ -39,6 +39,7 @@
     async-close
     show="{{ show }}"
     show-cancel-button
+    transition="fade"
     bind:close="onClose"
     confirm-button-open-type="getUserInfo"
     bind:getuserinfo="getUserInfo"

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 回调事件 |

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({
+        Promise.resolve()
-          inited: true,
+          .then(nextTick)
-          display: true,
+          .then(() =>
-          classes: classNames.enter,
+            this.set({
-          currentDuration: isObj(duration) ? duration.enter : duration
+              inited: true,
-        }).then(() => {
+              display: true,
-          requestAnimationFrame(() => {
+              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({
+        Promise.resolve()
-          classes: classNames.leave,
+          .then(nextTick)
-          currentDuration: isObj(duration) ? duration.leave : duration
+          .then(() =>
-        }).then(() => {
+            this.set({
-          requestAnimationFrame(() => {
+              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');
         }
       }
     }

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;
+}

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);

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