[improvement] add slide-down class (#2134)

packages/actionsheet/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <transition name="van-slide-bottom">
+  <transition name="van-slide-up">
     <div
       v-if="shouldRender"
       v-show="value"

packages/actionsheet/test/__snapshots__/index.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`callback events 1`] = `
-<div class="van-actionsheet" name="van-slide-bottom">
+<div class="van-actionsheet" name="van-slide-up">
   <ul class="van-hairline--bottom">
     <li class="van-actionsheet__item van-hairline--top"><span class="van-actionsheet__name">Option</span>
       <!---->

packages/number-keyboard/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <transition :name="transition ? 'van-slide-bottom' : ''">
+  <transition :name="transition ? 'van-slide-up' : ''">
     <div
       v-show="show"
       :style="style"

packages/number-keyboard/test/__snapshots__/demo.spec.js.snap

@@ -6,7 +6,7 @@ exports[`renders demo correctly 1`] = `
     <button class="van-button van-button--default van-button--normal"><span class="van-button__text">
       弹出默认键盘
     </span></button>
-    <div name="van-slide-bottom" class="van-number-keyboard van-number-keyboard--default" style="z-index:100;">
+    <div name="van-slide-up" class="van-number-keyboard van-number-keyboard--default" style="z-index:100;">
       <div class="van-hairline--top van-number-keyboard__title"><span></span> <span class="van-number-keyboard__close">完成</span></div>
       <div class="van-number-keyboard__body">
         <i class="van-hairline van-key">1</i>
@@ -29,7 +29,7 @@ exports[`renders demo correctly 1`] = `
     <button class="van-button van-button--default van-button--normal"><span class="van-button__text">
       弹出自定义键盘
     </span></button>
-    <div name="van-slide-bottom" class="van-number-keyboard van-number-keyboard--custom" style="z-index:100;display:none;">
+    <div name="van-slide-up" class="van-number-keyboard van-number-keyboard--custom" style="z-index:100;display:none;">
       <!---->
       <div class="van-number-keyboard__body">
         <i class="van-hairline van-key">1</i>

packages/password-input/test/__snapshots__/demo.spec.js.snap

@@ -26,7 +26,7 @@ exports[`renders demo correctly 1`] = `
       </ul>
       <div class="van-password-input__info">密码为 6 位数字</div>
     </div>
-    <div name="van-slide-bottom" class="van-number-keyboard van-number-keyboard--default" style="z-index:100;">
+    <div name="van-slide-up" class="van-number-keyboard van-number-keyboard--default" style="z-index:100;">
       <!---->
       <div class="van-number-keyboard__body">
         <i class="van-hairline van-key">1</i>

packages/style/animation.less

@@ -1,15 +1,27 @@
-@keyframes van-slide-bottom-enter {
+@keyframes van-slide-up-enter {
   from {
     transform: translate3d(0, 100%, 0);
   }
 }
 
-@keyframes van-slide-bottom-leave {
+@keyframes van-slide-up-leave {
   to {
     transform: translate3d(0, 100%, 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-fade-in {
   from {
     opacity: 0;
@@ -50,12 +62,22 @@
   }
 }
 
-.van-slide-bottom {
+.van-slide-up {
   &-enter-active {
-    animation: van-slide-bottom-enter .3s both ease;
+    animation: van-slide-up-enter .3s both ease;
   }
 
   &-leave-active {
-    animation: van-slide-bottom-leave .3s both ease;
+    animation: van-slide-up-leave .3s both ease;
+  }
+}
+
+.van-slide-down {
+  &-enter-active {
+    animation: van-slide-down-enter .3s both ease;
+  }
+
+  &-leave-active {
+    animation: van-slide-down-leave .3s both ease;
   }
 }

packages/style/demo/index.vue

@@ -9,30 +9,28 @@
     </demo-block>
 
     <demo-block :title="$t('animation')">
-      <van-switch-cell
+      <van-cell
-        v-model="show"
+        is-link
-        :title="$t('toggle')"
+        title="Fade"
-        :border="false"
+        @click="animate('van-fade')"
+      />
+      <van-cell
+        is-link
+        title="Slide Up"
+        @click="animate('van-slide-up')"
+      />
+      <van-cell
+        is-link
+        title="Slide Down"
+        @click="animate('van-slide-down')"
       />
-      <van-row>
-        <transition name="van-fade">
-          <van-col
-            v-show="show"
-            span="8"
-          >
-            Fade
-          </van-col>
-        </transition>
 
-        <transition name="van-slide-bottom">
+      <transition :name="transitionName">
-          <van-col
+        <div
-            v-show="show"
+          v-show="show"
-            span="8"
+          class="demo-animate-block"
-          >
+        />
-            Slide Bottom
+      </transition>
-          </van-col>
-        </transition>
-      </van-row>
     </demo-block>
   </demo-section>
 </template>
@@ -58,8 +56,20 @@ export default {
 
   data() {
     return {
-      show: true
+      show: false,
+      transitionName: ''
     };
+  },
+
+  methods: {
+    animate(transitionName) {
+      this.show = true;
+      this.transitionName = transitionName;
+
+      setTimeout(() => {
+        this.show = false;
+      }, 500);
+    }
   }
 };
 </script>
@@ -83,19 +93,15 @@ export default {
     }
   }
 
-  .van-col {
+  .demo-animate-block {
-    height: 50px;
+    top: 50%;
-    color: @white;
+    left: 50%;
-    font-size: 14px;
+    width: 100px;
+    height: 100px;
+    position: fixed;
     border-radius: 3px;
-    text-align: center;
+    margin: -50px 0 0 -50px;
-    line-height: 50px;
+    background-color: @blue;
-    margin-left: 15px;
-    background-color: #39a9ed;
-  }
-
-  .van-switch-cell {
-    margin-bottom: 15px;
   }
 }
 </style>

packages/style/en-US.md

@@ -41,8 +41,13 @@ Add 1px border under the Retina screen for the element, based on a pseudo elemen
   <div v-show="visible">Fade</div>
 </transition>
 
-<!-- slide bottom -->
+<!-- slide up -->
-<transition name="van-slide-bottom">
+<transition name="van-slide-up">
-  <div v-show="visible">Fade</div>
+  <div v-show="visible">Slide Up</div>
 </transition>
-```
+
+<!-- slide down -->
+<transition name="van-slide-down">
+  <div v-show="visible">Slide Down</div>
+</transition>
+```

packages/style/zh-CN.md

@@ -40,8 +40,13 @@ Vant 中默认包含了一些常用样式，可以直接通过 className 的方
   <div v-show="visible">Fade</div>
 </transition>
 
-<!-- 下滑 -->
+<!-- 上滑进入 -->
-<transition name="van-slide-bottom">
+<transition name="van-slide-up">
-  <div v-show="visible">Fade</div>
+  <div v-show="visible">Slide Up</div>
 </transition>
-```
+
+<!-- 下滑进入 -->
+<transition name="van-slide-down">
+  <div v-show="visible">Slide Down</div>
+</transition>
+```