[new feature] add Transition component (#441)

build/webpack.doc.dev.js

@@ -24,7 +24,8 @@ module.exports = {
       logLevel: 'warn'
     },
     hotClient: {
-      logLevel: 'warn'
+      logLevel: 'warn',
+      allEntries: true
     }
   },
   resolve: {

dist/notify/index.json

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

dist/notify/index.wxml

@@ -1,6 +1,8 @@
-<view
-  class="van-notify {{ show ? 'van-notify--show' : '' }}"
-  style="background-color:{{ backgroundColor }}"
+<van-transition
+  name="slide-down"
+  show="{{ show }}"
+  custom-class="van-notify"
+  custom-style="background-color:{{ backgroundColor }}"
 >
   {{ text }}
-</view>
+</van-transition>

dist/notify/index.wxss

@@ -1 +1 @@
-.van-notify{top:0;opacity:0;width:100%;z-index:110;color:#fff;position:fixed;min-height:32px;line-height:2.3;font-size:14px;text-align:center;background-color:#e64340;-webkit-transition:all .4s ease;transition:all .4s ease;-webkit-transform:translateZ(0) translateY(-100%);transform:translateZ(0) translateY(-100%)}.van-notify--show{opacity:1;-webkit-transform:translateZ(0) translateY(0);transform:translateZ(0) translateY(0)}
+.van-notify{top:0;width:100%;z-index:110;color:#fff;position:fixed;min-height:32px;line-height:2.3;font-size:14px;text-align:center;background-color:#e64340}

dist/toast/index.json

@@ -2,7 +2,7 @@
   "component": true,
   "usingComponents": {
     "van-icon": "../icon/index",
-    "van-popup": "../popup/index",
-    "van-loading": "../loading/index"
+    "van-loading": "../loading/index",
+    "van-transition": "../transition/index"
   }
 }

dist/toast/index.wxml

@@ -1,23 +1,26 @@
-<view
-  wx:if="{{ show && (mask || forbidClick) }}"
-  class="van-toast__overlay {{ mask ? 'van-toast__overlay--mask' : '' }}"
+<van-transition
+  show="{{ show && (mask || forbidClick) }}"
+  custom-class="van-toast__overlay"
+  custom-style="{{ mask ? 'background-color: rgba(0, 0, 0, .7);' : '' }}"
 />
-<view
-  wx:if="{{ show }}"
-  class="van-toast van-toast--{{ type === 'text' ? 'text' : 'icon' }} van-toast--{{ position }}"
+<van-transition
+  show="{{ show }}"
+  custom-class="van-toast__container"
 >
-  <!-- text only -->
-  <view wx:if="{{ type === 'text' }}">{{ message }}</view>
+  <view class="van-toast van-toast--{{ type === 'text' ? 'text' : 'icon' }} van-toast--{{ position }}">
+    <!-- text only -->
+    <view wx:if="{{ type === 'text' }}">{{ message }}</view>
 
-  <!-- with icon -->
-  <block wx:else>
-    <van-loading
-      wx:if="{{ type === 'loading' }}"
-      color="white"
-      type="{{ loadingType }}"
-      custom-class="van-toast__loading"
-    />
-    <van-icon wx:else class="van-toast__icon" name="{{ type }}" />
-    <view wx:if="{{ message }}" class="van-toast__text">{{ message }}</view>
-  </block>
-</view>
+    <!-- with icon -->
+    <block wx:else>
+      <van-loading
+        wx:if="{{ type === 'loading' }}"
+        color="white"
+        type="{{ loadingType }}"
+        custom-class="van-toast__loading"
+      />
+      <van-icon wx:else class="van-toast__icon" name="{{ type }}" />
+      <view wx:if="{{ message }}" class="van-toast__text">{{ message }}</view>
+    </block>
+  </view>
+</van-transition>

dist/toast/index.wxss

@@ -1 +1 @@
-.van-toast{top:50%;left:50%;display:-webkit-box;display:-webkit-flex;display:flex;position:fixed;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;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:rgba(0,0,0,.7);z-index:3001}.van-toast__overlay{z-index:3000;position:fixed;top:0;left:0;right:0;bottom:0}.van-toast__overlay--mask{background-color:rgba(0,0,0,.7)}.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{top:50px;-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}.van-toast--bottom{top:auto;bottom:50px;-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}
+.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)}

dist/transition/index.js

@@ -0,0 +1,57 @@
+Component({
+  externalClasses: ['custom-class'],
+
+  properties: {
+    customStyle: String,
+    show: {
+      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: 'enter',
+    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
+        });
+      }
+    }
+  }
+});

dist/transition/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

dist/transition/index.wxml

@@ -0,0 +1,8 @@
+<view
+  wx:if="{{ inited }}"
+  class="van-transition custom-class"
+  style="animation-name: van-{{ name }}-{{ type }}; animation-duration: {{ duration }}ms; {{ display ? '' : 'display: none;' }} {{ customStyle }}"
+  bind:animationend="onAnimationEnd"
+>
+  <slot />
+</view>

dist/transition/index.wxss

@@ -0,0 +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)}}

packages/notify/index.json

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

packages/notify/index.pcss

@@ -2,7 +2,6 @@
 
 .van-notify {
   top: 0;
-  opacity: 0;
   width: 100%;
   z-index: 110;
   color: $white;
@@ -12,11 +11,4 @@
   font-size: 14px;
   text-align: center;
   background-color: #E64340;
-  transition: all 0.4s ease;
-  transform: translateZ(0) translateY(-100%);
-
-  &--show {
-    opacity: 1;
-    transform: translateZ(0) translateY(0);
-  }
 }

packages/notify/index.wxml

@@ -1,6 +1,8 @@
-<view
-  class="van-notify {{ show ? 'van-notify--show' : '' }}"
-  style="background-color:{{ backgroundColor }}"
+<van-transition
+  name="slide-down"
+  show="{{ show }}"
+  custom-class="van-notify"
+  custom-style="background-color:{{ backgroundColor }}"
 >
   {{ text }}
-</view>
+</van-transition>

packages/toast/index.json

@@ -2,7 +2,7 @@
   "component": true,
   "usingComponents": {
     "van-icon": "../icon/index",
-    "van-popup": "../popup/index",
-    "van-loading": "../loading/index"
+    "van-loading": "../loading/index",
+    "van-transition": "../transition/index"
   }
 }

packages/toast/index.pcss

@@ -1,10 +1,7 @@
 @import '../common/style/var.pcss';
 
 .van-toast {
-  top: 50%;
-  left: 50%;
   display: flex;
-  position: fixed;
   color: $white;
   font-size: 12px;
   line-height: 1.2;
@@ -14,9 +11,15 @@
   justify-content: center;
   flex-direction: column;
   box-sizing: border-box;
-  transform: translate(-50%, -50%);
   background-color: rgba(0, 0, 0, .7);
-  z-index: 3001;
+
+  &__container {
+    top: 50%;
+    left: 50%;
+    z-index: 3001;
+    position: fixed;
+    transform: translate(-50%, -50%);
+  }
 
   &__overlay {
     z-index: 3000;
@@ -25,10 +28,6 @@
     left: 0;
     right: 0;
     bottom: 0;
-
-    &--mask {
-      background-color: rgba(0, 0, 0, .7);
-    }
   }
 
   &--text {
@@ -57,13 +56,10 @@
   }
 
   &--top {
-    top: 50px;
-    transform: translate(-50%, 0);
+    transform: translate(0, -30vh);
   }
 
   &--bottom {
-    top: auto;
-    bottom: 50px;
-    transform: translate(-50%, 0);
+    transform: translate(0, 30vh);
   }
 }

packages/toast/index.wxml

@@ -1,23 +1,26 @@
-<view
-  wx:if="{{ show && (mask || forbidClick) }}"
-  class="van-toast__overlay {{ mask ? 'van-toast__overlay--mask' : '' }}"
+<van-transition
+  show="{{ show && (mask || forbidClick) }}"
+  custom-class="van-toast__overlay"
+  custom-style="{{ mask ? 'background-color: rgba(0, 0, 0, .7);' : '' }}"
 />
-<view
-  wx:if="{{ show }}"
-  class="van-toast van-toast--{{ type === 'text' ? 'text' : 'icon' }} van-toast--{{ position }}"
+<van-transition
+  show="{{ show }}"
+  custom-class="van-toast__container"
 >
-  <!-- text only -->
-  <view wx:if="{{ type === 'text' }}">{{ message }}</view>
+  <view class="van-toast van-toast--{{ type === 'text' ? 'text' : 'icon' }} van-toast--{{ position }}">
+    <!-- text only -->
+    <view wx:if="{{ type === 'text' }}">{{ message }}</view>
 
-  <!-- with icon -->
-  <block wx:else>
-    <van-loading
-      wx:if="{{ type === 'loading' }}"
-      color="white"
-      type="{{ loadingType }}"
-      custom-class="van-toast__loading"
-    />
-    <van-icon wx:else class="van-toast__icon" name="{{ type }}" />
-    <view wx:if="{{ message }}" class="van-toast__text">{{ message }}</view>
-  </block>
-</view>
+    <!-- with icon -->
+    <block wx:else>
+      <van-loading
+        wx:if="{{ type === 'loading' }}"
+        color="white"
+        type="{{ loadingType }}"
+        custom-class="van-toast__loading"
+      />
+      <van-icon wx:else class="van-toast__icon" name="{{ type }}" />
+      <view wx:if="{{ message }}" class="van-toast__text">{{ message }}</view>
+    </block>
+  </view>
+</van-transition>

packages/transition/index.js

@@ -0,0 +1,57 @@
+Component({
+  externalClasses: ['custom-class'],
+
+  properties: {
+    customStyle: String,
+    show: {
+      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: 'enter',
+    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/transition/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

packages/transition/index.pcss

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

packages/transition/index.wxml

@@ -0,0 +1,8 @@
+<view
+  wx:if="{{ inited }}"
+  class="van-transition custom-class"
+  style="animation-name: van-{{ name }}-{{ type }}; animation-duration: {{ duration }}ms; {{ display ? '' : 'display: none;' }} {{ customStyle }}"
+  bind:animationend="onAnimationEnd"
+>
+  <slot />
+</view>