[Improvement] Popup: support leave animation (#498)

packages/behaviors/transition.js

@@ -0,0 +1,52 @@
+module.exports = Behavior({
+  properties: {
+    customStyle: String,
+    show: {
+      value: true,
+      type: Boolean,
+      observer(value) {
+        if (value) {
+          this.show();
+        } else {
+          this.setData({
+            type: 'leave'
+          });
+        }
+      }
+    },
+    duration: {
+      type: Number,
+      value: 300
+    }
+  },
+
+  data: {
+    type: '',
+    inited: false,
+    display: false
+  },
+
+  attached() {
+    if (this.data.show) {
+      this.show();
+    }
+  },
+
+  methods: {
+    show() {
+      this.setData({
+        inited: true,
+        display: true,
+        type: 'enter'
+      });
+    },
+
+    onAnimationEnd() {
+      if (!this.data.show) {
+        this.setData({
+          display: false
+        });
+      }
+    }
+  }
+});

packages/popup/README.md

@@ -49,8 +49,9 @@ Page({
 | show | 当前组件是否显示 | `Boolean` | `false` |
 | overlay | 是否显示背景蒙层 | `Boolean` | `true` |
 | position | 可选值为 `top` `bottom` `right` `left` | `String` | - |
-| overlay-style | 自定义蒙层样式 | `Object` | `` |
+| overlay-style | 自定义蒙层样式 | `String` | `` |
 | close-on-click-overlay | 点击蒙层是否关闭 Popup | `Boolean` | `true` |
+| duration | 动画时长，单位为毫秒 | `Number` | `300` |
 
 ### Event
 
@@ -64,4 +65,3 @@ Page({
 | 类名 | 说明 |
 |-----------|-----------|
 | custom-class | 根节点样式类 |
-| overlay-class | 蒙层样式类 |

packages/popup/index.js

@@ -1,3 +1,5 @@
+const transitionBehaviors = require('../behaviors/transition');
+
 Component({
   options: {
     addGlobalClass: true
@@ -8,9 +10,23 @@ Component({
     'overlay-class'
   ],
 
+  behaviors: [transitionBehaviors],
+
   properties: {
-    show: Boolean,
     overlayStyle: String,
+    show: {
+      value: false,
+      type: Boolean,
+      observer(value) {
+        if (value) {
+          this.show();
+        } else {
+          this.setData({
+            type: 'leave'
+          });
+        }
+      }
+    },
     overlay: {
       type: Boolean,
       value: true

packages/popup/index.json

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

packages/popup/index.pcss

@@ -4,27 +4,16 @@
   top: 50%;
   left: 50%;
   z-index: 11;
+  position: fixed;
   max-height: 100%;
   overflow-y: auto;
   box-sizing: border-box;
   background-color: $white;
   -webkit-overflow-scrolling: touch;
-  transform: translate3d(-50%, -50%, 0);
+  animation: ease both;
 
-  &,
-  &__overlay {
-    display: none;
-    position: fixed;
-    animation: van-fade-in .3s ease;
-  }
-
-  &__overlay {
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    z-index: 10;
-    background-color: rgba(0, 0, 0, 0.7);
+  &--center {
+    transform: translate3d(-50%, -50%, 0);
   }
 
   &--top {
@@ -33,8 +22,6 @@
     right: auto;
     bottom: auto;
     left: 50%;
-    transform: translate3d(-50%, 0, 0);
-    animation-name: van-popup-top;
   }
 
   &--right {
@@ -42,8 +29,6 @@
     right: 0;
     bottom: auto;
     left: auto;
-    transform: translate3d(0, -50%, 0);
-    animation-name: van-popup-right;
   }
 
   &--bottom {
@@ -52,8 +37,6 @@
     bottom: 0;
     right: auto;
     left: 50%;
-    transform: translate3d(-50%, 0, 0);
-    animation-name: van-popup-bottom;
   }
 
   &--left {
@@ -61,40 +44,10 @@
     right: auto;
     bottom: auto;
     left: 0;
-    transform: translate3d(0, -50%, 0);
-    animation-name: van-popup-left;
-  }
-
-  &--show {
-    display: block;
   }
 }
 
-@keyframes van-popup-top {
-  from {
-    transform: translate3d(-50%, -100%, 0);
-  }
-}
-
-@keyframes van-popup-bottom {
-  from {
-    transform: translate3d(-50%, 100%, 0);
-  }
-}
-
-@keyframes van-popup-left {
-  from {
-    transform: translate3d(-100%, -50%, 0);
-  }
-}
-
-@keyframes van-popup-right {
-  from {
-    transform: translate3d(100%, -50%, 0);
-  }
-}
-
-@keyframes van-fade-in {
+@keyframes van-center-enter {
   from {
     opacity: 0;
   }
@@ -103,3 +56,85 @@
     opacity: 1;
   }
 }
+
+@keyframes van-center-leave {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes van-bottom-enter {
+  from {
+    transform: translate3d(-50%, 100%, 0);
+  }
+  to {
+    transform: translate3d(-50%, 0, 0);
+  }
+}
+
+@keyframes van-bottom-leave {
+  from {
+    transform: translate3d(-50%, 0, 0);
+  }
+  to {
+    transform: translate3d(-50%, 100%, 0);
+  }
+}
+
+@keyframes van-top-enter {
+  from {
+    transform: translate3d(-50%, -100%, 0);
+  }
+  to {
+    transform: translate3d(-50%, 0, 0);
+  }
+}
+
+@keyframes van-top-leave {
+  from {
+    transform: translate3d(-50%, 0, 0);
+  }
+  to {
+    transform: translate3d(-50%, -100%, 0);
+  }
+}
+
+@keyframes van-left-enter {
+  from {
+    transform: translate3d(-100%, -50%, 0);
+  }
+  to {
+    transform: translate3d(0, -50%, 0);
+  }
+}
+
+@keyframes van-left-leave {
+  from {
+    transform: translate3d(0, -50%, 0);
+  }
+  to {
+    transform: translate3d(-100%, -50%, 0);
+  }
+}
+
+@keyframes van-right-enter {
+  from {
+    transform: translate3d(100%, -50%, 0);
+  }
+  to {
+    transform: translate3d(0, -50%, 0);
+  }
+}
+
+@keyframes van-right-leave {
+  from {
+    transform: translate3d(0, -50%, 0);
+  }
+  to {
+    transform: translate3d(100%, -50%, 0);
+  }
+}

packages/popup/index.wxml

@@ -1,9 +1,14 @@
-<view
-  wx:if="{{ overlay }}"
-  class="overlay-class van-popup__overlay {{ show ? 'van-popup--show' : '' }}"
-  style="{{ overlayStyle }}"
-  bind:tap="onClickOverlay"
+<van-overlay
+  mask
+  show="{{ overlay && show }}"
+  custom-style="{{ overlayStyle }}"
+  bind:click="onClickOverlay"
 />
-<view class="custom-class van-popup {{ position ? 'van-popup--' + position : '' }} {{ show ? 'van-popup--show' : '' }}">
+<view
+  wx:if="{{ inited }}"
+  class="custom-class van-popup {{ position ? 'van-popup--' + position : '' }}"
+  style="animation-name: van-{{ position }}-{{ type }}; animation-duration: {{ duration }}ms; {{ display ? '' : 'display: none;' }}"
+  bind:animationend="onAnimationEnd"
+>
   <slot />
 </view>

packages/transition/index.js

@@ -1,3 +1,5 @@
+const transitionBehaviors = require('../behaviors/transition');
+
 Component({
   options: {
     addGlobalClass: true
@@ -5,58 +7,12 @@ Component({
 
   externalClasses: ['custom-class'],
 
+  behaviors: [transitionBehaviors],
+
   properties: {
-    customStyle: String,
-    show: {
-      value: true,
-      type: Boolean,
-      observer(value) {
-        if (value) {
-          this.show();
-        } else {
-          this.setData({
-            type: 'leave'
-          });
-        }
-      }
-    },
     name: {
       type: String,
       value: 'fade'
-    },
-    duration: {
-      type: Number,
-      value: 300
-    }
-  },
-
-  data: {
-    type: '',
-    inited: false,
-    display: false
-  },
-
-  attached() {
-    if (this.data.show) {
-      this.show();
-    }
-  },
-
-  methods: {
-    show() {
-      this.setData({
-        inited: true,
-        display: true,
-        type: 'enter'
-      });
-    },
-
-    onAnimationEnd() {
-      if (!this.data.show) {
-        this.setData({
-          display: false
-        });
-      }
     }
   }
 });