From ba6dbcd673d63675ae222f3c538aacb2b25accbc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=81=E9=87=87?= <zhangzilong.zzl@163.com>
Date: Fri, 31 May 2019 09:30:56 +0800
Subject: [PATCH] [improvement] Picker: stop momentum before emit confim event
 (#3411)

---
 .../test/__snapshots__/index.spec.js.snap     | 12 ++---
 .../area/test/__snapshots__/demo.spec.js.snap | 16 +++----
 .../test/__snapshots__/index.spec.js.snap     | 48 +++++++++----------
 .../test/__snapshots__/demo.spec.js.snap      | 28 +++++------
 packages/picker/PickerColumn.js               | 19 +++++---
 packages/picker/index.js                      |  1 +
 .../test/__snapshots__/demo.spec.js.snap      | 16 +++----
 .../test/__snapshots__/index.spec.js.snap     |  4 +-
 8 files changed, 75 insertions(+), 69 deletions(-)

diff --git a/packages/address-edit/test/__snapshots__/index.spec.js.snap b/packages/address-edit/test/__snapshots__/index.spec.js.snap
index 5dc1d0b1e..2c7277c21 100644
--- a/packages/address-edit/test/__snapshots__/index.spec.js.snap
+++ b/packages/address-edit/test/__snapshots__/index.spec.js.snap
@@ -40,13 +40,13 @@ exports[`create a AddressEdit 1`] = `
       <div class="van-loading van-loading--circular van-picker__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color:#1989fa;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
       <div class="van-picker__columns" style="height:220px;">
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform:translate3d(0, 88px, 0);transition-duration:0ms;line-height:44px;"></ul>
+          <ul class="van-picker-column__wrapper" style="transform:translate3d(0, 88px, 0);transition-duration:0ms;transition-property:none;line-height:44px;"></ul>
         </div>
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform:translate3d(0, 88px, 0);transition-duration:0ms;line-height:44px;"></ul>
+          <ul class="van-picker-column__wrapper" style="transform:translate3d(0, 88px, 0);transition-duration:0ms;transition-property:none;line-height:44px;"></ul>
         </div>
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform:translate3d(0, 88px, 0);transition-duration:0ms;line-height:44px;"></ul>
+          <ul class="van-picker-column__wrapper" style="transform:translate3d(0, 88px, 0);transition-duration:0ms;transition-property:none;line-height:44px;"></ul>
         </div>
         <div class="van-picker__mask" style="background-size:100% 88px;"></div>
         <div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
@@ -110,13 +110,13 @@ exports[`create a AddressEdit with props 1`] = `
       <!---->
       <div class="van-picker__columns" style="height:220px;">
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform:translate3d(0, 88px, 0);transition-duration:0ms;line-height:44px;"></ul>
+          <ul class="van-picker-column__wrapper" style="transform:translate3d(0, 88px, 0);transition-duration:0ms;transition-property:none;line-height:44px;"></ul>
         </div>
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform:translate3d(0, 88px, 0);transition-duration:0ms;line-height:44px;"></ul>
+          <ul class="van-picker-column__wrapper" style="transform:translate3d(0, 88px, 0);transition-duration:0ms;transition-property:none;line-height:44px;"></ul>
         </div>
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform:translate3d(0, 88px, 0);transition-duration:0ms;line-height:44px;"></ul>
+          <ul class="van-picker-column__wrapper" style="transform:translate3d(0, 88px, 0);transition-duration:0ms;transition-property:none;line-height:44px;"></ul>
         </div>
         <div class="van-picker__mask" style="background-size:100% 88px;"></div>
         <div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
diff --git a/packages/area/test/__snapshots__/demo.spec.js.snap b/packages/area/test/__snapshots__/demo.spec.js.snap
index e548d5bec..617e3c707 100644
--- a/packages/area/test/__snapshots__/demo.spec.js.snap
+++ b/packages/area/test/__snapshots__/demo.spec.js.snap
@@ -11,7 +11,7 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">河北省</li>
@@ -50,12 +50,12 @@ exports[`renders demo correctly 1`] = `
           </ul>
         </div>
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
           </ul>
         </div>
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">东城区</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">朝阳区</li>
@@ -88,7 +88,7 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, -352px, 0); transition-duration: 0ms; line-height: 44px;">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, -352px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">河北省</li>
@@ -127,7 +127,7 @@ exports[`renders demo correctly 1`] = `
           </ul>
         </div>
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; line-height: 44px;">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州市</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波市</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州市</li>
@@ -142,7 +142,7 @@ exports[`renders demo correctly 1`] = `
           </ul>
         </div>
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">鹿城区</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">龙湾区</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">瓯海区</li>
@@ -171,7 +171,7 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">河北省</li>
@@ -210,7 +210,7 @@ exports[`renders demo correctly 1`] = `
           </ul>
         </div>
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
           </ul>
         </div>
diff --git a/packages/area/test/__snapshots__/index.spec.js.snap b/packages/area/test/__snapshots__/index.spec.js.snap
index f47a20f3d..5021bcc1f 100644
--- a/packages/area/test/__snapshots__/index.spec.js.snap
+++ b/packages/area/test/__snapshots__/index.spec.js.snap
@@ -9,19 +9,19 @@ exports[`change option 1`] = `
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
-      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
       </ul>
     </div>
     <div class="van-picker-column">
-      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
       </ul>
     </div>
     <div class="van-picker-column">
-      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">东城区</li>
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
       </ul>
@@ -41,19 +41,19 @@ exports[`change option 2`] = `
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
-      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 200ms; line-height: 44px;">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
       </ul>
     </div>
     <div class="van-picker-column">
-      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
       </ul>
     </div>
     <div class="van-picker-column">
-      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">和平区</li>
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">河东区</li>
       </ul>
@@ -73,19 +73,19 @@ exports[`change option 3`] = `
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
-      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 200ms; line-height: 44px;">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
       </ul>
     </div>
     <div class="van-picker-column">
-      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
       </ul>
     </div>
     <div class="van-picker-column">
-      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 200ms; line-height: 44px;">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">和平区</li>
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">河东区</li>
       </ul>
@@ -105,19 +105,19 @@ exports[`reset method 1`] = `
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
-      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; line-height: 44px;">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
       </ul>
     </div>
     <div class="van-picker-column">
-      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; line-height: 44px;">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
       </ul>
     </div>
     <div class="van-picker-column">
-      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">蓟县</li>
       </ul>
     </div>
@@ -136,19 +136,19 @@ exports[`reset method 2`] = `
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
-      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
       </ul>
     </div>
     <div class="van-picker-column">
-      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
       </ul>
     </div>
     <div class="van-picker-column">
-      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">东城区</li>
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
       </ul>
@@ -168,19 +168,19 @@ exports[`watch areaList & code 1`] = `
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
-      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
       </ul>
     </div>
     <div class="van-picker-column">
-      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
       </ul>
     </div>
     <div class="van-picker-column">
-      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">东城区</li>
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
       </ul>
@@ -200,19 +200,19 @@ exports[`watch areaList & code 2`] = `
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
-      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
       </ul>
     </div>
     <div class="van-picker-column">
-      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
       </ul>
     </div>
     <div class="van-picker-column">
-      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">东城区</li>
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
       </ul>
@@ -232,19 +232,19 @@ exports[`watch areaList & code 3`] = `
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
-      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
       </ul>
     </div>
     <div class="van-picker-column">
-      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
       </ul>
     </div>
     <div class="van-picker-column">
-      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">东城区</li>
         <li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
       </ul>
diff --git a/packages/datetime-picker/test/__snapshots__/demo.spec.js.snap b/packages/datetime-picker/test/__snapshots__/demo.spec.js.snap
index 21feaf4f1..c2c21e141 100644
--- a/packages/datetime-picker/test/__snapshots__/demo.spec.js.snap
+++ b/packages/datetime-picker/test/__snapshots__/demo.spec.js.snap
@@ -11,13 +11,13 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2018</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2019</li>
           </ul>
         </div>
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
@@ -33,7 +33,7 @@ exports[`renders demo correctly 1`] = `
           </ul>
         </div>
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
@@ -68,7 +68,7 @@ exports[`renders demo correctly 1`] = `
           </ul>
         </div>
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">00</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
@@ -96,7 +96,7 @@ exports[`renders demo correctly 1`] = `
           </ul>
         </div>
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">00</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
@@ -173,7 +173,7 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2018</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2019</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2020</li>
@@ -189,7 +189,7 @@ exports[`renders demo correctly 1`] = `
           </ul>
         </div>
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
@@ -205,7 +205,7 @@ exports[`renders demo correctly 1`] = `
           </ul>
         </div>
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
@@ -253,7 +253,7 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2018年</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2019年</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2020年</li>
@@ -269,7 +269,7 @@ exports[`renders demo correctly 1`] = `
           </ul>
         </div>
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">01月</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">02月</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">03月</li>
@@ -298,7 +298,7 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; line-height: 44px;">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
@@ -313,7 +313,7 @@ exports[`renders demo correctly 1`] = `
           </ul>
         </div>
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">00</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
@@ -390,7 +390,7 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, -440px, 0); transition-duration: 0ms; line-height: 44px;">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, -440px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">00</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
@@ -418,7 +418,7 @@ exports[`renders demo correctly 1`] = `
           </ul>
         </div>
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">00</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
diff --git a/packages/picker/PickerColumn.js b/packages/picker/PickerColumn.js
index e2686f7d7..1adf1c153 100644
--- a/packages/picker/PickerColumn.js
+++ b/packages/picker/PickerColumn.js
@@ -129,13 +129,7 @@ export default sfc({
     },
 
     onTransitionEnd() {
-      this.moving = false;
-
-      if (this.transitionEndTrigger) {
-        this.duration = DEFAULT_DURATION;
-        this.transitionEndTrigger();
-        this.transitionEndTrigger = null;
-      }
+      this.stopMomentum();
     },
 
     onClickItem(index) {
@@ -213,6 +207,16 @@ export default sfc({
       this.duration = MOMENTUM_DURATION;
       this.setIndex(index, true);
     },
+
+    stopMomentum() {
+      this.moving = false;
+      this.duration = 0;
+
+      if (this.transitionEndTrigger) {
+        this.transitionEndTrigger();
+        this.transitionEndTrigger = null;
+      }
+    }
   },
 
   render(h) {
@@ -223,6 +227,7 @@ export default sfc({
     const wrapperStyle = {
       transform: `translate3d(0, ${this.offset + baseOffset}px, 0)`,
       transitionDuration: `${this.duration}ms`,
+      transitionProperty: this.duration ? 'transform' : 'none',
       lineHeight: `${itemHeight}px`
     };
 
diff --git a/packages/picker/index.js b/packages/picker/index.js
index 9d9b6a669..59d5a9314 100644
--- a/packages/picker/index.js
+++ b/packages/picker/index.js
@@ -131,6 +131,7 @@ export default sfc({
     },
 
     onConfirm() {
+      this.children.map(child => child.stopMomentum());
       this.emit('confirm');
     },
 
diff --git a/packages/picker/test/__snapshots__/demo.spec.js.snap b/packages/picker/test/__snapshots__/demo.spec.js.snap
index 1dbbde6d4..e77596cfe 100644
--- a/packages/picker/test/__snapshots__/demo.spec.js.snap
+++ b/packages/picker/test/__snapshots__/demo.spec.js.snap
@@ -7,7 +7,7 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
@@ -25,7 +25,7 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; line-height: 44px;">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
@@ -48,7 +48,7 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
@@ -66,7 +66,7 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; line-height: 44px;">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 44px;">杭州</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
@@ -82,13 +82,13 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column column1">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">浙江</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">福建</li>
           </ul>
         </div>
         <div class="van-picker-column column2">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; line-height: 44px;">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
@@ -106,13 +106,13 @@ exports[`renders demo correctly 1`] = `
       <div class="van-loading van-loading--circular van-picker__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(25, 137, 250);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column column1">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">浙江</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">福建</li>
           </ul>
         </div>
         <div class="van-picker-column column2">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; line-height: 44px;">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
diff --git a/packages/picker/test/__snapshots__/index.spec.js.snap b/packages/picker/test/__snapshots__/index.spec.js.snap
index f391d82b3..922ce961c 100644
--- a/packages/picker/test/__snapshots__/index.spec.js.snap
+++ b/packages/picker/test/__snapshots__/index.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`column watch default index 1`] = `
 <div class="van-picker-column">
-  <ul class="van-picker-column__wrapper" style="transform: translate3d(0, -75px, 0); transition-duration: 0ms; line-height: 50px;">
+  <ul class="van-picker-column__wrapper" style="transform: translate3d(0, -75px, 0); transition-duration: 0ms; transition-property: none; line-height: 50px;">
     <li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">1</li>
     <li class="van-ellipsis van-picker-column__item" style="height: 50px;">1990</li>
     <li class="van-ellipsis van-picker-column__item" style="height: 50px;">1991</li>
@@ -16,7 +16,7 @@ exports[`column watch default index 1`] = `
 
 exports[`column watch default index 2`] = `
 <div class="van-picker-column">
-  <ul class="van-picker-column__wrapper" style="transform: translate3d(0, -125px, 0); transition-duration: 0ms; line-height: 50px;">
+  <ul class="van-picker-column__wrapper" style="transform: translate3d(0, -125px, 0); transition-duration: 0ms; transition-property: none; line-height: 50px;">
     <li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">1</li>
     <li class="van-ellipsis van-picker-column__item" style="height: 50px;">1990</li>
     <li class="van-ellipsis van-picker-column__item" style="height: 50px;">1991</li>