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

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

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>
-```
+
+<!-- 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">
-  <div v-show="visible">Fade</div>
+<!-- 上滑进入 -->
+<transition name="van-slide-up">
+  <div v-show="visible">Slide Up</div>
 </transition>
-```
+
+<!-- 下滑进入 -->
+<transition name="van-slide-down">
+  <div v-show="visible">Slide Down</div>
+</transition>
+```