[improvement] add more transition class (#2163)

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;
+  }
+}

packages/style/demo/index.vue

@@ -24,14 +24,24 @@
         title="Slide Down"
         @click="animate('van-slide-down')"
       />
-
+      <van-cell
-      <transition :name="transitionName">
+        is-link
-        <div
+        title="Slide Left"
-          v-show="show"
+        @click="animate('van-slide-left')"
-          class="demo-animate-block"
+      />
-        />
+      <van-cell
-      </transition>
+        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>
 

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

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