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 简体中文,
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"
/>