From 00458839a20056258a9b6e2ff5037b1c794c1f85 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Sun, 25 Nov 2018 09:28:21 +0800
Subject: [PATCH] [improvement] add slide-down class (#2134)

---
 packages/actionsheet/index.vue                |  2 +-
 .../test/__snapshots__/index.spec.js.snap     |  2 +-
 packages/number-keyboard/index.vue            |  2 +-
 .../test/__snapshots__/demo.spec.js.snap      |  4 +-
 .../test/__snapshots__/demo.spec.js.snap      |  2 +-
 packages/style/animation.less                 | 32 ++++++--
 packages/style/demo/index.vue                 | 76 ++++++++++---------
 packages/style/en-US.md                       | 13 +++-
 packages/style/zh-CN.md                       | 13 +++-
 9 files changed, 92 insertions(+), 54 deletions(-)

diff --git a/packages/actionsheet/index.vue b/packages/actionsheet/index.vue
index 2791fb102..db56eb4e8 100644
--- a/packages/actionsheet/index.vue
+++ b/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"
diff --git a/packages/actionsheet/test/__snapshots__/index.spec.js.snap b/packages/actionsheet/test/__snapshots__/index.spec.js.snap
index f98d228d8..f1ebcd5bb 100644
--- a/packages/actionsheet/test/__snapshots__/index.spec.js.snap
+++ b/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>
       <!---->
diff --git a/packages/number-keyboard/index.vue b/packages/number-keyboard/index.vue
index b3cbbafc8..5cad4ee4e 100644
--- a/packages/number-keyboard/index.vue
+++ b/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"
diff --git a/packages/number-keyboard/test/__snapshots__/demo.spec.js.snap b/packages/number-keyboard/test/__snapshots__/demo.spec.js.snap
index d73b55bf4..24bc727c8 100644
--- a/packages/number-keyboard/test/__snapshots__/demo.spec.js.snap
+++ b/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>
diff --git a/packages/password-input/test/__snapshots__/demo.spec.js.snap b/packages/password-input/test/__snapshots__/demo.spec.js.snap
index eb045e82f..30a1a9499 100644
--- a/packages/password-input/test/__snapshots__/demo.spec.js.snap
+++ b/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>
diff --git a/packages/style/animation.less b/packages/style/animation.less
index 94acb20ee..c888f6aa9 100644
--- a/packages/style/animation.less
+++ b/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;
   }
 }
diff --git a/packages/style/demo/index.vue b/packages/style/demo/index.vue
index c3453727c..53da6782c 100644
--- a/packages/style/demo/index.vue
+++ b/packages/style/demo/index.vue
@@ -9,30 +9,28 @@
     </demo-block>
 
     <demo-block :title="$t('animation')">
-      <van-switch-cell
-        v-model="show"
-        :title="$t('toggle')"
-        :border="false"
+      <van-cell
+        is-link
+        title="Fade"
+        @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">
-          <van-col
-            v-show="show"
-            span="8"
-          >
-            Slide Bottom
-          </van-col>
-        </transition>
-      </van-row>
+      <transition :name="transitionName">
+        <div
+          v-show="show"
+          class="demo-animate-block"
+        />
+      </transition>
     </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 {
-    height: 50px;
-    color: @white;
-    font-size: 14px;
+  .demo-animate-block {
+    top: 50%;
+    left: 50%;
+    width: 100px;
+    height: 100px;
+    position: fixed;
     border-radius: 3px;
-    text-align: center;
-    line-height: 50px;
-    margin-left: 15px;
-    background-color: #39a9ed;
-  }
-
-  .van-switch-cell {
-    margin-bottom: 15px;
+    margin: -50px 0 0 -50px;
+    background-color: @blue;
   }
 }
 </style>
diff --git a/packages/style/en-US.md b/packages/style/en-US.md
index b2192ac72..c94ca642b 100644
--- a/packages/style/en-US.md
+++ b/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 -->
-<transition name="van-slide-bottom">
-  <div v-show="visible">Fade</div>
+<!-- slide up -->
+<transition name="van-slide-up">
+  <div v-show="visible">Slide Up</div>
 </transition>
-```
\ No newline at end of file
+
+<!-- slide down -->
+<transition name="van-slide-down">
+  <div v-show="visible">Slide Down</div>
+</transition>
+```
diff --git a/packages/style/zh-CN.md b/packages/style/zh-CN.md
index c779ef945..b073c9feb 100644
--- a/packages/style/zh-CN.md
+++ b/packages/style/zh-CN.md
@@ -40,8 +40,13 @@ Vant 中默认包含了一些常用样式，可以直接通过 className 的方
   <div v-show="visible">Fade</div>
 </transition>
 
-<!-- 下滑 -->
-<transition name="van-slide-bottom">
-  <div v-show="visible">Fade</div>
+<!-- 上滑进入 -->
+<transition name="van-slide-up">
+  <div v-show="visible">Slide Up</div>
 </transition>
-```
\ No newline at end of file
+
+<!-- 下滑进入 -->
+<transition name="van-slide-down">
+  <div v-show="visible">Slide Down</div>
+</transition>
+```