diff --git a/dist/overlay/index.js b/dist/overlay/index.js
index e2a08dc3..67f32cfc 100644
--- a/dist/overlay/index.js
+++ b/dist/overlay/index.js
@@ -1,11 +1,17 @@
Component({
properties: {
- show: Boolean
+ show: Boolean,
+ mask: Boolean,
+ customStyle: String,
+ zIndex: {
+ type: Number,
+ value: 1
+ }
},
methods: {
- onClickOverlay() {
-
+ onClick() {
+ this.triggerEvent('click');
}
}
});
diff --git a/dist/overlay/index.json b/dist/overlay/index.json
index 467ce294..c14a65f6 100644
--- a/dist/overlay/index.json
+++ b/dist/overlay/index.json
@@ -1,3 +1,6 @@
{
- "component": true
+ "component": true,
+ "usingComponents": {
+ "van-transition": "../transition/index"
+ }
}
diff --git a/dist/overlay/index.wxml b/dist/overlay/index.wxml
index bf46ec1c..c1630662 100644
--- a/dist/overlay/index.wxml
+++ b/dist/overlay/index.wxml
@@ -1,5 +1,6 @@
-
diff --git a/dist/overlay/index.wxss b/dist/overlay/index.wxss
index e69de29b..ab451c1c 100644
--- a/dist/overlay/index.wxss
+++ b/dist/overlay/index.wxss
@@ -0,0 +1 @@
+.van-overlay{position:fixed;top:0;left:0;right:0;bottom:0}
\ No newline at end of file
diff --git a/dist/toast/index.json b/dist/toast/index.json
index d75305d7..9b1b78c4 100644
--- a/dist/toast/index.json
+++ b/dist/toast/index.json
@@ -3,6 +3,7 @@
"usingComponents": {
"van-icon": "../icon/index",
"van-loading": "../loading/index",
+ "van-overlay": "../overlay/index",
"van-transition": "../transition/index"
}
}
diff --git a/dist/toast/index.wxml b/dist/toast/index.wxml
index 52be4ff2..2587219b 100644
--- a/dist/toast/index.wxml
+++ b/dist/toast/index.wxml
@@ -1,7 +1,7 @@
-
{
+ this.setData({ show: false });
+ }, 500);
+ }
+});
diff --git a/example/pages/transition/index.json b/example/pages/transition/index.json
new file mode 100644
index 00000000..8429b11e
--- /dev/null
+++ b/example/pages/transition/index.json
@@ -0,0 +1,8 @@
+{
+ "navigationBarTitleText": "Transition 动画",
+ "usingComponents": {
+ "demo-block": "../../components/demo-block/index",
+ "van-cell": "../../dist/cell/index",
+ "van-transition": "../../dist/transition/index"
+ }
+}
diff --git a/example/pages/transition/index.wxml b/example/pages/transition/index.wxml
new file mode 100644
index 00000000..c3887365
--- /dev/null
+++ b/example/pages/transition/index.wxml
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/example/pages/transition/index.wxss b/example/pages/transition/index.wxss
new file mode 100644
index 00000000..563b15f7
--- /dev/null
+++ b/example/pages/transition/index.wxss
@@ -0,0 +1,9 @@
+.block {
+ top: 50%;
+ left: 50%;
+ width: 100px;
+ height: 100px;
+ position: fixed;
+ margin: -50px 0 0 -50px;
+ background-color: #38f;
+}
diff --git a/packages/transition/README.md b/packages/transition/README.md
new file mode 100644
index 00000000..562591d2
--- /dev/null
+++ b/packages/transition/README.md
@@ -0,0 +1,57 @@
+## Transition 动画
+
+### 使用指南
+
+在 index.json 中引入组件
+```json
+"usingComponents": {
+ "van-transition": "path/to/vant-weapp/dist/transition/index"
+}
+```
+
+### 代码演示
+
+#### 基础用法
+将元素包裹在 transition 组件内，在元素展示/隐藏时，会有相应的过渡动画
+
+```html
+
+ 内容
+
+```
+
+#### 动画类型
+transition 组件内置了多种动画，可以通过`name`字段指定动画类型
+
+```html
+
+```
+
+### API
+
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|-----------|-----------|-------------|
+| name | 动画类型 | `String` | `fade`|
+| show | 是否展示组件 | `Boolean` | `true` |
+| duration | 动画时长，单位为毫秒 | `Number` | `300` |
+| custom-style | 自定义样式 | `String` | - |
+
+### 外部样式类
+
+| 类名 | 说明 |
+|-----------|-----------|
+| custom-class | 根节点样式类 |
+
+### 动画类型
+
+| 名称 | 说明 |
+|-----------|-----------|
+| fade | 淡入 |
+| fade-up | 上滑淡入 |
+| fade-down | 下滑淡入 |
+| fade-left | 左滑淡入 |
+| fade-right | 右滑淡入 |
+| slide-up | 上滑进入 |
+| slide-down | 下滑进入 |
+| slide-left | 左滑进入 |
+| slide-right | 右滑进入 |
diff --git a/packages/transition/index.js b/packages/transition/index.js
index 2aebbaf3..51cb5ade 100644
--- a/packages/transition/index.js
+++ b/packages/transition/index.js
@@ -4,6 +4,7 @@ Component({
properties: {
customStyle: String,
show: {
+ value: true,
type: Boolean,
observer(value) {
if (value) {
@@ -26,7 +27,7 @@ Component({
},
data: {
- type: 'enter',
+ type: '',
inited: false,
display: false
},
diff --git a/packages/transition/index.pcss b/packages/transition/index.pcss
index 7df23b3d..5ee8c129 100644
--- a/packages/transition/index.pcss
+++ b/packages/transition/index.pcss
@@ -22,6 +22,46 @@
}
}
+@keyframes van-fade-up-enter {
+ from {
+ opacity: 0;
+ transform: translate3d(0, 100%, 0);
+ }
+}
+
+@keyframes van-fade-up-leave {
+ to {
+ opacity: 0;
+ transform: translate3d(0, 100%, 0);
+ }
+}
+
+@keyframes van-slide-up-enter {
+ from {
+ transform: translate3d(0, 100%, 0);
+ }
+}
+
+@keyframes van-slide-up-leave {
+ to {
+ transform: translate3d(0, 100%, 0);
+ }
+}
+
+@keyframes van-fade-down-enter {
+ from {
+ opacity: 0;
+ transform: translate3d(0, -100%, 0);
+ }
+}
+
+@keyframes van-fade-down-leave {
+ to {
+ opacity: 0;
+ transform: translate3d(0, -100%, 0);
+ }
+}
+
@keyframes van-slide-down-enter {
from {
transform: translate3d(0, -100%, 0);
@@ -34,15 +74,17 @@
}
}
-@keyframes van-slide-top-enter {
+@keyframes van-fade-left-enter {
from {
- transform: translate3d(0, 100%, 0);
+ opacity: 0;
+ transform: translate3d(-100%, 0, 0);
}
}
-@keyframes van-slide-top-leave {
+@keyframes van-fade-left-leave {
to {
- transform: translate3d(0, 100%, 0);
+ opacity: 0;
+ transform: translate3d(-100%, 0, 0);
}
}
@@ -58,6 +100,20 @@
}
}
+@keyframes van-fade-right-enter {
+ from {
+ opacity: 0;
+ transform: translate3d(100%, 0, 0);
+ }
+}
+
+@keyframes van-fade-right-leave {
+ to {
+ opacity: 0;
+ transform: translate3d(100%, 0, 0);
+ }
+}
+
@keyframes van-slide-right-enter {
from {
transform: translate3d(100%, 0, 0);