[Improvement] Transition: support more animation (#445)

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

dist/overlay/index.json

@@ -1,3 +1,6 @@
 {
-  "component": true
+  "component": true,
+  "usingComponents": {
+    "van-transition": "../transition/index"
+  }
 }

dist/overlay/index.wxml

@@ -1,5 +1,6 @@
-<view
-  class="overlay-class van-popup__overlay {{ show ? 'van-popup--show' : '' }}"
-  style="{{ overlayStyle }}"
-  bind:tap="onClickOverlay"
+<van-transition
+  show="{{ show }}"
+  custom-class="van-overlay"
+  custom-style="z-index: {{ zIndex }}; {{ mask ? 'background-color: rgba(0, 0, 0, .7);' : '' }}; {{ customStyle }}"
+  bind:tap="onClick"
 />

dist/overlay/index.wxss

@@ -0,0 +1 @@
+.van-overlay{position:fixed;top:0;left:0;right:0;bottom:0}

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"
   }
 }

dist/toast/index.wxml

@@ -1,7 +1,7 @@
-<van-transition
+<van-overlay
   show="{{ show && (mask || forbidClick) }}"
-  custom-class="van-toast__overlay"
-  custom-style="{{ mask ? 'background-color: rgba(0, 0, 0, .7);' : '' }}"
+  mask="{{ mask }}"
+  z-index="3000"
 />
 <van-transition
   show="{{ show }}"

dist/toast/index.wxss

@@ -1 +1 @@
-.van-toast{display:-webkit-box;display:-webkit-flex;display:flex;color:#fff;font-size:12px;line-height:1.2;border-radius:5px;word-break:break-all;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;box-sizing:border-box;background-color:rgba(0,0,0,.7)}.van-toast__container{top:50%;left:50%;z-index:3001;position:fixed;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.van-toast__overlay{z-index:3000;position:fixed;top:0;left:0;right:0;bottom:0}.van-toast--text{padding:12px;min-width:220px}.van-toast--icon{width:120px;min-height:120px;padding:15px}.van-toast--icon .van-toast__icon{height:1em;font-size:50px}.van-toast--icon .van-toast__text{font-size:14px;padding-top:10px}.van-toast__loading{margin:10px 0 5px}.van-toast--top{-webkit-transform:translate(0,-30vh);transform:translate(0,-30vh)}.van-toast--bottom{-webkit-transform:translate(0,30vh);transform:translate(0,30vh)}
+.van-toast{display:-webkit-box;display:-webkit-flex;display:flex;color:#fff;font-size:12px;line-height:1.2;border-radius:5px;word-break:break-all;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;box-sizing:border-box;background-color:rgba(0,0,0,.7)}.van-toast__container{top:50%;left:50%;z-index:3001;position:fixed;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.van-toast--text{padding:12px;min-width:220px}.van-toast--icon{width:120px;min-height:120px;padding:15px}.van-toast--icon .van-toast__icon{height:1em;font-size:50px}.van-toast--icon .van-toast__text{font-size:14px;padding-top:10px}.van-toast__loading{margin:10px 0 5px}.van-toast--top{-webkit-transform:translate(0,-30vh);transform:translate(0,-30vh)}.van-toast--bottom{-webkit-transform:translate(0,30vh);transform:translate(0,30vh)}

dist/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
   },

dist/transition/index.wxss

@@ -1 +1 @@
-.van-transition{-webkit-animation:ease both;animation:ease both}@-webkit-keyframes van-fade-enter{from{opacity:0}to{opacity:1}}@keyframes van-fade-enter{from{opacity:0}to{opacity:1}}@-webkit-keyframes van-fade-leave{from{opacity:1}to{opacity:0}}@keyframes van-fade-leave{from{opacity:1}to{opacity:0}}@-webkit-keyframes van-slide-down-enter{from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes van-slide-down-enter{from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@-webkit-keyframes van-slide-down-leave{to{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes van-slide-down-leave{to{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@-webkit-keyframes van-slide-top-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-top-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-slide-top-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-top-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-slide-left-enter{from{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes van-slide-left-enter{from{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@-webkit-keyframes van-slide-left-leave{to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes van-slide-left-leave{to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@-webkit-keyframes van-slide-right-enter{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes van-slide-right-enter{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@-webkit-keyframes van-slide-right-leave{to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes van-slide-right-leave{to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}
+.van-transition{-webkit-animation:ease both;animation:ease both}@-webkit-keyframes van-fade-enter{from{opacity:0}to{opacity:1}}@keyframes van-fade-enter{from{opacity:0}to{opacity:1}}@-webkit-keyframes van-fade-leave{from{opacity:1}to{opacity:0}}@keyframes van-fade-leave{from{opacity:1}to{opacity:0}}@-webkit-keyframes van-fade-up-enter{from{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-fade-up-enter{from{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-fade-up-leave{to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-fade-up-leave{to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-slide-up-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-up-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-slide-up-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-up-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-fade-down-enter{from{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes van-fade-down-enter{from{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@-webkit-keyframes van-fade-down-leave{to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes van-fade-down-leave{to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@-webkit-keyframes van-slide-down-enter{from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes van-slide-down-enter{from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@-webkit-keyframes van-slide-down-leave{to{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes van-slide-down-leave{to{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@-webkit-keyframes van-fade-left-enter{from{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes van-fade-left-enter{from{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@-webkit-keyframes van-fade-left-leave{to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes van-fade-left-leave{to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@-webkit-keyframes van-slide-left-enter{from{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes van-slide-left-enter{from{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@-webkit-keyframes van-slide-left-leave{to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes van-slide-left-leave{to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@-webkit-keyframes van-fade-right-enter{from{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes van-fade-right-enter{from{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@-webkit-keyframes van-fade-right-leave{to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes van-fade-right-leave{to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@-webkit-keyframes van-slide-right-enter{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes van-slide-right-enter{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@-webkit-keyframes van-slide-right-leave{to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes van-slide-right-leave{to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}

docs/src/Preview.vue

@@ -35,6 +35,7 @@ const MAP = {
   tag: 'tag-201808092138.png',
   tabbar: 'tabbar-201808160922.png',
   toast: 'toast-201808191046.png',
+  transition: 'transition-20180821.png',
   'tree-select': 'tree-select-201808092138.png'
 };
 

example/app.json

@@ -22,6 +22,7 @@
     "pages/tag/index",
     "pages/toast/index",
     "pages/tabbar/index",
+    "pages/transition/index",
     "pages/tree-select/index"
   ],
   "window": {

example/config.js

@@ -53,6 +53,10 @@ export default [
       {
         path: '/tabbar',
         title: 'Tabbar 标签栏'
+      },
+      {
+        path: '/transition',
+        title: 'Transition 动画'
       }
     ]
   },

example/pages/transition/index.js

@@ -0,0 +1,51 @@
+import Page from '../../common/page';
+
+Page({
+  data: {
+    show: false,
+    name: 'fade'
+  },
+
+  onClickFade() {
+    this.trigger('fade');
+  },
+
+  onClickFadeUp() {
+    this.trigger('fade-up');
+  },
+
+  onClickFadeDown() {
+    this.trigger('fade-down');
+  },
+
+  onClickFadeLeft() {
+    this.trigger('fade-left');
+  },
+
+  onClickFadeRight() {
+    this.trigger('fade-right');
+  },
+
+  onClickSlideUp() {
+    this.trigger('slide-up');
+  },
+
+  onClickSlideDown() {
+    this.trigger('slide-down');
+  },
+
+  onClickSlideLeft() {
+    this.trigger('slide-left');
+  },
+
+  onClickSlideRight() {
+    this.trigger('slide-right');
+  },
+
+  trigger(name) {
+    this.setData({ name, show: true });
+    setTimeout(() => {
+      this.setData({ show: false });
+    }, 500);
+  }
+});

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

example/pages/transition/index.wxml

@@ -0,0 +1,17 @@
+<demo-block title="基础用法" padding>
+  <van-cell title="Fade" bind:click="onClickFade" is-link />
+  <van-cell title="Fade Up" bind:click="onClickFadeUp" is-link />
+  <van-cell title="Fade Down" bind:click="onClickFadeDown" is-link />
+  <van-cell title="Fade Left" bind:click="onClickFadeLeft" is-link />
+  <van-cell title="Fade Right" bind:click="onClickFadeRight" is-link />
+  <van-cell title="Slide Up" bind:click="onClickSlideUp" is-link />
+  <van-cell title="Slide Down" bind:click="onClickSlideDown" is-link />
+  <van-cell title="Slide Left" bind:click="onClickSlideLeft" is-link />
+  <van-cell title="Slide Right" bind:click="onClickSlideRight" is-link />
+
+  <van-transition
+    show="{{ show }}"
+    name="{{ name }}"
+    custom-class="block"
+  />
+</demo-block>

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

packages/transition/README.md

@@ -0,0 +1,57 @@
+## Transition 动画
+
+### 使用指南
+
+在 index.json 中引入组件
+```json
+"usingComponents": {
+  "van-transition": "path/to/vant-weapp/dist/transition/index"
+}
+```
+
+### 代码演示
+
+#### 基础用法
+将元素包裹在 transition 组件内，在元素展示/隐藏时，会有相应的过渡动画
+
+```html
+<van-transition show="{{ show }}" custom-class="block">
+  内容
+</van-transition>
+```
+
+#### 动画类型
+transition 组件内置了多种动画，可以通过`name`字段指定动画类型
+
+```html
+<van-transition name="fade-up" />
+```
+
+### 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 | 右滑进入 |

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
   },

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