From db224f5c7733af727fcfac8056d67b400da1ee30 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Tue, 27 Nov 2018 19:12:13 +0800
Subject: [PATCH] [improvement] add more transition class (#2163)

---
 packages/style/animation.less | 44 +++++++++++++++++++++++++++++++++++
 packages/style/demo/index.vue | 24 +++++++++++++------
 packages/style/en-US.md       | 10 ++++++++
 packages/style/zh-CN.md       | 10 ++++++++
 4 files changed, 81 insertions(+), 7 deletions(-)

diff --git a/packages/style/animation.less b/packages/style/animation.less
index c888f6aa9..ce04b672f 100644
--- a/packages/style/animation.less
+++ b/packages/style/animation.less
@@ -22,6 +22,30 @@
   }
 }
 
+@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);
+  }
+}
+
 @keyframes van-fade-in {
   from {
     opacity: 0;
@@ -81,3 +105,23 @@
     animation: van-slide-down-leave .3s both ease;
   }
 }
+
+.van-slide-left {
+  &-enter-active {
+    animation: van-slide-left-enter .3s both ease;
+  }
+
+  &-leave-active {
+    animation: van-slide-left-leave .3s both ease;
+  }
+}
+
+.van-slide-right {
+  &-enter-active {
+    animation: van-slide-right-enter .3s both ease;
+  }
+
+  &-leave-active {
+    animation: van-slide-right-leave .3s both ease;
+  }
+}
diff --git a/packages/style/demo/index.vue b/packages/style/demo/index.vue
index 53da6782c..502cfab4f 100644
--- a/packages/style/demo/index.vue
+++ b/packages/style/demo/index.vue
@@ -24,14 +24,24 @@
         title="Slide Down"
         @click="animate('van-slide-down')"
       />
-
-      <transition :name="transitionName">
-        <div
-          v-show="show"
-          class="demo-animate-block"
-        />
-      </transition>
+      <van-cell
+        is-link
+        title="Slide Left"
+        @click="animate('van-slide-left')"
+      />
+      <van-cell
+        is-link
+        title="Slide Right"
+        @click="animate('van-slide-right')"
+      />
     </demo-block>
+
+    <transition :name="transitionName">
+      <div
+        v-show="show"
+        class="demo-animate-block"
+      />
+    </transition>
   </demo-section>
 </template>
 
diff --git a/packages/style/en-US.md b/packages/style/en-US.md
index c94ca642b..3bc501360 100644
--- a/packages/style/en-US.md
+++ b/packages/style/en-US.md
@@ -50,4 +50,14 @@ Add 1px border under the Retina screen for the element, based on a pseudo elemen
 <transition name="van-slide-down">
   <div v-show="visible">Slide Down</div>
 </transition>
+
+<!-- slide left -->
+<transition name="van-slide-left">
+  <div v-show="visible">Slide Left</div>
+</transition>
+
+<!-- slide right -->
+<transition name="van-slide-right">
+  <div v-show="visible">Slide Right</div>
+</transition>
 ```
diff --git a/packages/style/zh-CN.md b/packages/style/zh-CN.md
index b073c9feb..321653151 100644
--- a/packages/style/zh-CN.md
+++ b/packages/style/zh-CN.md
@@ -49,4 +49,14 @@ Vant 中默认包含了一些常用样式，可以直接通过 className 的方
 <transition name="van-slide-down">
   <div v-show="visible">Slide Down</div>
 </transition>
+
+<!-- 左滑进入 -->
+<transition name="van-slide-left">
+  <div v-show="visible">Slide Left</div>
+</transition>
+
+<!-- 右滑进入 -->
+<transition name="van-slide-right">
+  <div v-show="visible">Slide Right</div>
+</transition>
 ```