From dd6053cd0945beceddd09c82296d28777b495325 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sat, 12 Oct 2019 11:39:24 +0800
Subject: [PATCH] feat(Slider): add slide animation & improve click area
 (#2146)

---
 packages/slider/index.less | 15 +++++++++++++--
 packages/slider/index.ts   |  6 +++++-
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/slider/index.less b/packages/slider/index.less
index 892498ce..20cf2470 100644
--- a/packages/slider/index.less
+++ b/packages/slider/index.less
@@ -6,15 +6,26 @@
   border-radius: 999px;
   .theme(background-color, '@gray-light');
 
+  // use pseudo element to expand click area
+  &::before {
+    position: absolute;
+    top: -@padding-xs;
+    right: 0;
+    bottom: -@padding-xs;
+    left: 0;
+    content: '';
+  }
+
   &__bar {
     position: relative;
     border-radius: inherit;
+    transition: width @animation-duration-fast;
     .theme(background-color, '@blue');
   }
 
   &__button {
-    width: 20px;
-    height: 20px;
+    width: 24px;
+    height: 24px;
     border-radius: 50%;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
     .theme(background-color, '@white');
diff --git a/packages/slider/index.ts b/packages/slider/index.ts
index ce768328..566f0f07 100644
--- a/packages/slider/index.ts
+++ b/packages/slider/index.ts
@@ -96,7 +96,11 @@ VantComponent({
 
       this.setData({
         value,
-        barStyle: `width: ${width}; height: ${addUnit(barHeight)};`
+        barStyle: `
+          width: ${width};
+          height: ${addUnit(barHeight)};
+          ${drag ? 'transition: none;' : ''}
+        `,
       });
 
       if (drag) {