From 21db7e57ad22bd848e98bd2ad49f9ad4cc9e1f00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=81=E9=87=87?= <zhangzilong.zzl@163.com>
Date: Wed, 22 May 2019 16:33:35 +0800
Subject: [PATCH] [improvement] Picker: support Inertial rolling (#3331)

---
 .../test/__snapshots__/index.spec.js.snap     |  14 +-
 .../area/test/__snapshots__/demo.spec.js.snap | 309 ++++-----
 .../test/__snapshots__/index.spec.js.snap     | 150 ++---
 packages/area/test/index.spec.js              |   5 +
 .../test/__snapshots__/demo.spec.js.snap      | 586 +++++++++---------
 packages/picker/PickerColumn.js               | 137 +++-
 packages/picker/index.js                      |   8 +-
 packages/picker/index.less                    |  19 +-
 .../test/__snapshots__/demo.spec.js.snap      |  86 +--
 .../test/__snapshots__/index.spec.js.snap     |  33 +-
 packages/picker/test/index.spec.js            |  57 +-
 11 files changed, 804 insertions(+), 600 deletions(-)

diff --git a/packages/address-edit/test/__snapshots__/index.spec.js.snap b/packages/address-edit/test/__snapshots__/index.spec.js.snap
index 9623de848..6e7aa9c0e 100644
--- a/packages/address-edit/test/__snapshots__/index.spec.js.snap
+++ b/packages/address-edit/test/__snapshots__/index.spec.js.snap
@@ -40,14 +40,15 @@ 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" style="height:220px;">
-          <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;"></ul>
+          <ul style="transform:translate3d(0, 88px, 0);transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1);transition-duration:0ms;line-height:44px;"></ul>
         </div>
         <div class="van-picker-column" style="height:220px;">
-          <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;"></ul>
+          <ul style="transform:translate3d(0, 88px, 0);transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1);transition-duration:0ms;line-height:44px;"></ul>
         </div>
         <div class="van-picker-column" style="height:220px;">
-          <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;"></ul>
+          <ul style="transform:translate3d(0, 88px, 0);transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1);transition-duration:0ms;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>
       </div>
     </div>
@@ -109,14 +110,15 @@ exports[`create a AddressEdit with props 1`] = `
       <!---->
       <div class="van-picker__columns" style="height:220px;">
         <div class="van-picker-column" style="height:220px;">
-          <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;"></ul>
+          <ul style="transform:translate3d(0, 88px, 0);transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1);transition-duration:0ms;line-height:44px;"></ul>
         </div>
         <div class="van-picker-column" style="height:220px;">
-          <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;"></ul>
+          <ul style="transform:translate3d(0, 88px, 0);transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1);transition-duration:0ms;line-height:44px;"></ul>
         </div>
         <div class="van-picker-column" style="height:220px;">
-          <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;"></ul>
+          <ul style="transform:translate3d(0, 88px, 0);transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1);transition-duration:0ms;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>
       </div>
     </div>
diff --git a/packages/area/test/__snapshots__/demo.spec.js.snap b/packages/area/test/__snapshots__/demo.spec.js.snap
index 840df29d2..2b7e32edb 100644
--- a/packages/area/test/__snapshots__/demo.spec.js.snap
+++ b/packages/area/test/__snapshots__/demo.spec.js.snap
@@ -11,69 +11,70 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column" style="height: 220px;">
-          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" 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>
-            <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>
-            <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>
-            <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>
-            <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>
-            <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>
-            <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>
-            <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>
-            <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>
-            <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>
-            <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>
-            <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 style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+            <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
+            <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
+            <li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">河北省</li>
+            <li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">山西省</li>
+            <li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">内蒙古自治区</li>
+            <li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">辽宁省</li>
+            <li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">吉林省</li>
+            <li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">黑龙江省</li>
+            <li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">上海市</li>
+            <li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">江苏省</li>
+            <li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">浙江省</li>
+            <li data-index="11" class="van-ellipsis van-picker-column__item" style="height: 44px;">安徽省</li>
+            <li data-index="12" class="van-ellipsis van-picker-column__item" style="height: 44px;">福建省</li>
+            <li data-index="13" class="van-ellipsis van-picker-column__item" style="height: 44px;">江西省</li>
+            <li data-index="14" class="van-ellipsis van-picker-column__item" style="height: 44px;">山东省</li>
+            <li data-index="15" class="van-ellipsis van-picker-column__item" style="height: 44px;">河南省</li>
+            <li data-index="16" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖北省</li>
+            <li data-index="17" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖南省</li>
+            <li data-index="18" class="van-ellipsis van-picker-column__item" style="height: 44px;">广东省</li>
+            <li data-index="19" class="van-ellipsis van-picker-column__item" style="height: 44px;">广西壮族自治区</li>
+            <li data-index="20" class="van-ellipsis van-picker-column__item" style="height: 44px;">海南省</li>
+            <li data-index="21" class="van-ellipsis van-picker-column__item" style="height: 44px;">重庆市</li>
+            <li data-index="22" class="van-ellipsis van-picker-column__item" style="height: 44px;">四川省</li>
+            <li data-index="23" class="van-ellipsis van-picker-column__item" style="height: 44px;">贵州省</li>
+            <li data-index="24" class="van-ellipsis van-picker-column__item" style="height: 44px;">云南省</li>
+            <li data-index="25" class="van-ellipsis van-picker-column__item" style="height: 44px;">西藏自治区</li>
+            <li data-index="26" class="van-ellipsis van-picker-column__item" style="height: 44px;">陕西省</li>
+            <li data-index="27" class="van-ellipsis van-picker-column__item" style="height: 44px;">甘肃省</li>
+            <li data-index="28" class="van-ellipsis van-picker-column__item" style="height: 44px;">青海省</li>
+            <li data-index="29" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁夏回族自治区</li>
+            <li data-index="30" class="van-ellipsis van-picker-column__item" style="height: 44px;">新疆维吾尔自治区</li>
+            <li data-index="31" class="van-ellipsis van-picker-column__item" style="height: 44px;">台湾省</li>
+            <li data-index="32" class="van-ellipsis van-picker-column__item" style="height: 44px;">香港特别行政区</li>
+            <li data-index="33" class="van-ellipsis van-picker-column__item" style="height: 44px;">澳门特别行政区</li>
+            <li data-index="34" class="van-ellipsis van-picker-column__item" style="height: 44px;">海外</li>
           </ul>
         </div>
         <div class="van-picker-column" style="height: 220px;">
-          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
+          <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+            <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
           </ul>
         </div>
         <div class="van-picker-column" style="height: 220px;">
-          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" 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>
-            <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>
-            <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>
-            <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>
-            <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>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">延庆区</li>
+          <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+            <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
+            <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
+            <li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">朝阳区</li>
+            <li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">丰台区</li>
+            <li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">石景山区</li>
+            <li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">海淀区</li>
+            <li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">门头沟区</li>
+            <li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">房山区</li>
+            <li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">通州区</li>
+            <li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">顺义区</li>
+            <li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">昌平区</li>
+            <li data-index="11" class="van-ellipsis van-picker-column__item" style="height: 44px;">大兴区</li>
+            <li data-index="12" class="van-ellipsis van-picker-column__item" style="height: 44px;">怀柔区</li>
+            <li data-index="13" class="van-ellipsis van-picker-column__item" style="height: 44px;">平谷区</li>
+            <li data-index="14" class="van-ellipsis van-picker-column__item" style="height: 44px;">密云区</li>
+            <li data-index="15" class="van-ellipsis van-picker-column__item" style="height: 44px;">延庆区</li>
           </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>
       </div>
     </div>
@@ -87,74 +88,75 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column" style="height: 220px;">
-          <ul style="transition: 0ms; transform: translate3d(0, -352px, 0); 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>
-            <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>
-            <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>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">江苏省</li>
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" 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>
-            <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>
-            <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>
-            <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>
-            <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>
-            <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>
-            <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>
-            <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>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">海外</li>
+          <ul style="transform: translate3d(0, -352px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+            <li data-index="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
+            <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
+            <li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">河北省</li>
+            <li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">山西省</li>
+            <li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">内蒙古自治区</li>
+            <li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">辽宁省</li>
+            <li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">吉林省</li>
+            <li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">黑龙江省</li>
+            <li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">上海市</li>
+            <li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">江苏省</li>
+            <li data-index="10" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">浙江省</li>
+            <li data-index="11" class="van-ellipsis van-picker-column__item" style="height: 44px;">安徽省</li>
+            <li data-index="12" class="van-ellipsis van-picker-column__item" style="height: 44px;">福建省</li>
+            <li data-index="13" class="van-ellipsis van-picker-column__item" style="height: 44px;">江西省</li>
+            <li data-index="14" class="van-ellipsis van-picker-column__item" style="height: 44px;">山东省</li>
+            <li data-index="15" class="van-ellipsis van-picker-column__item" style="height: 44px;">河南省</li>
+            <li data-index="16" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖北省</li>
+            <li data-index="17" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖南省</li>
+            <li data-index="18" class="van-ellipsis van-picker-column__item" style="height: 44px;">广东省</li>
+            <li data-index="19" class="van-ellipsis van-picker-column__item" style="height: 44px;">广西壮族自治区</li>
+            <li data-index="20" class="van-ellipsis van-picker-column__item" style="height: 44px;">海南省</li>
+            <li data-index="21" class="van-ellipsis van-picker-column__item" style="height: 44px;">重庆市</li>
+            <li data-index="22" class="van-ellipsis van-picker-column__item" style="height: 44px;">四川省</li>
+            <li data-index="23" class="van-ellipsis van-picker-column__item" style="height: 44px;">贵州省</li>
+            <li data-index="24" class="van-ellipsis van-picker-column__item" style="height: 44px;">云南省</li>
+            <li data-index="25" class="van-ellipsis van-picker-column__item" style="height: 44px;">西藏自治区</li>
+            <li data-index="26" class="van-ellipsis van-picker-column__item" style="height: 44px;">陕西省</li>
+            <li data-index="27" class="van-ellipsis van-picker-column__item" style="height: 44px;">甘肃省</li>
+            <li data-index="28" class="van-ellipsis van-picker-column__item" style="height: 44px;">青海省</li>
+            <li data-index="29" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁夏回族自治区</li>
+            <li data-index="30" class="van-ellipsis van-picker-column__item" style="height: 44px;">新疆维吾尔自治区</li>
+            <li data-index="31" class="van-ellipsis van-picker-column__item" style="height: 44px;">台湾省</li>
+            <li data-index="32" class="van-ellipsis van-picker-column__item" style="height: 44px;">香港特别行政区</li>
+            <li data-index="33" class="van-ellipsis van-picker-column__item" style="height: 44px;">澳门特别行政区</li>
+            <li data-index="34" class="van-ellipsis van-picker-column__item" style="height: 44px;">海外</li>
           </ul>
         </div>
         <div class="van-picker-column" style="height: 220px;">
-          <ul style="transition: 0ms; transform: translate3d(0, 0px, 0); 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 van-picker-column__item--selected" 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>
-            <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>
-            <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>
+          <ul style="transform: translate3d(0, 0px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+            <li data-index="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州市</li>
+            <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波市</li>
+            <li data-index="2" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州市</li>
+            <li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴市</li>
+            <li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州市</li>
+            <li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">绍兴市</li>
+            <li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">金华市</li>
+            <li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">衢州市</li>
+            <li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">舟山市</li>
+            <li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">台州市</li>
+            <li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">丽水市</li>
           </ul>
         </div>
         <div class="van-picker-column" style="height: 220px;">
-          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" 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>
-            <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>
-            <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>
-            <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 style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+            <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">鹿城区</li>
+            <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">龙湾区</li>
+            <li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">瓯海区</li>
+            <li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">洞头区</li>
+            <li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">永嘉县</li>
+            <li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">平阳县</li>
+            <li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">苍南县</li>
+            <li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">文成县</li>
+            <li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">泰顺县</li>
+            <li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">瑞安市</li>
+            <li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">乐清市</li>
           </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>
       </div>
     </div>
@@ -169,49 +171,50 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column" style="height: 220px;">
-          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" 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>
-            <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>
-            <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>
-            <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>
-            <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>
-            <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>
-            <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>
-            <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>
-            <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>
-            <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>
-            <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>
-            <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 style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+            <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
+            <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
+            <li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">河北省</li>
+            <li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">山西省</li>
+            <li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">内蒙古自治区</li>
+            <li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">辽宁省</li>
+            <li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">吉林省</li>
+            <li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">黑龙江省</li>
+            <li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">上海市</li>
+            <li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">江苏省</li>
+            <li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">浙江省</li>
+            <li data-index="11" class="van-ellipsis van-picker-column__item" style="height: 44px;">安徽省</li>
+            <li data-index="12" class="van-ellipsis van-picker-column__item" style="height: 44px;">福建省</li>
+            <li data-index="13" class="van-ellipsis van-picker-column__item" style="height: 44px;">江西省</li>
+            <li data-index="14" class="van-ellipsis van-picker-column__item" style="height: 44px;">山东省</li>
+            <li data-index="15" class="van-ellipsis van-picker-column__item" style="height: 44px;">河南省</li>
+            <li data-index="16" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖北省</li>
+            <li data-index="17" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖南省</li>
+            <li data-index="18" class="van-ellipsis van-picker-column__item" style="height: 44px;">广东省</li>
+            <li data-index="19" class="van-ellipsis van-picker-column__item" style="height: 44px;">广西壮族自治区</li>
+            <li data-index="20" class="van-ellipsis van-picker-column__item" style="height: 44px;">海南省</li>
+            <li data-index="21" class="van-ellipsis van-picker-column__item" style="height: 44px;">重庆市</li>
+            <li data-index="22" class="van-ellipsis van-picker-column__item" style="height: 44px;">四川省</li>
+            <li data-index="23" class="van-ellipsis van-picker-column__item" style="height: 44px;">贵州省</li>
+            <li data-index="24" class="van-ellipsis van-picker-column__item" style="height: 44px;">云南省</li>
+            <li data-index="25" class="van-ellipsis van-picker-column__item" style="height: 44px;">西藏自治区</li>
+            <li data-index="26" class="van-ellipsis van-picker-column__item" style="height: 44px;">陕西省</li>
+            <li data-index="27" class="van-ellipsis van-picker-column__item" style="height: 44px;">甘肃省</li>
+            <li data-index="28" class="van-ellipsis van-picker-column__item" style="height: 44px;">青海省</li>
+            <li data-index="29" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁夏回族自治区</li>
+            <li data-index="30" class="van-ellipsis van-picker-column__item" style="height: 44px;">新疆维吾尔自治区</li>
+            <li data-index="31" class="van-ellipsis van-picker-column__item" style="height: 44px;">台湾省</li>
+            <li data-index="32" class="van-ellipsis van-picker-column__item" style="height: 44px;">香港特别行政区</li>
+            <li data-index="33" class="van-ellipsis van-picker-column__item" style="height: 44px;">澳门特别行政区</li>
+            <li data-index="34" class="van-ellipsis van-picker-column__item" style="height: 44px;">海外</li>
           </ul>
         </div>
         <div class="van-picker-column" style="height: 220px;">
-          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
+          <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+            <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
           </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>
       </div>
     </div>
diff --git a/packages/area/test/__snapshots__/index.spec.js.snap b/packages/area/test/__snapshots__/index.spec.js.snap
index 1ebee1c5b..6fa0b5ee5 100644
--- a/packages/area/test/__snapshots__/index.spec.js.snap
+++ b/packages/area/test/__snapshots__/index.spec.js.snap
@@ -9,23 +9,24 @@ exports[`change option 1`] = `
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
-        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
+      <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+        <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
+        <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
       </ul>
     </div>
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
-        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
+      <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+        <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
+        <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
       </ul>
     </div>
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
-        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
+      <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+        <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
+        <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
       </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>
   </div>
 </div>
@@ -40,23 +41,24 @@ exports[`change option 2`] = `
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="transition: 200ms; transform: translate3d(0, 44px, 0); line-height: 44px;">
-        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
-        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
+      <ul style="transform: translate3d(0, 44px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 1500ms; line-height: 44px;">
+        <li data-index="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
+        <li data-index="1" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
       </ul>
     </div>
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
-        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
+      <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+        <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
+        <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
       </ul>
     </div>
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">和平区</li>
-        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">河东区</li>
+      <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+        <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">和平区</li>
+        <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">河东区</li>
       </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>
   </div>
 </div>
@@ -71,23 +73,24 @@ exports[`change option 3`] = `
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="transition: 200ms; transform: translate3d(0, 44px, 0); line-height: 44px;">
-        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
-        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
+      <ul style="transform: translate3d(0, 44px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 1500ms; line-height: 44px;">
+        <li data-index="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
+        <li data-index="1" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
       </ul>
     </div>
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
-        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
+      <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+        <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
+        <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
       </ul>
     </div>
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="transition: 200ms; transform: translate3d(0, 44px, 0); line-height: 44px;">
-        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">和平区</li>
-        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">河东区</li>
+      <ul style="transform: translate3d(0, 44px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 1500ms; line-height: 44px;">
+        <li data-index="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">和平区</li>
+        <li data-index="1" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">河东区</li>
       </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>
   </div>
 </div>
@@ -102,22 +105,23 @@ exports[`reset method 1`] = `
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="transition: 0ms; transform: translate3d(0, 44px, 0); line-height: 44px;">
-        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
-        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
+      <ul style="transform: translate3d(0, 44px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+        <li data-index="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
+        <li data-index="1" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
       </ul>
     </div>
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="transition: 0ms; transform: translate3d(0, 44px, 0); line-height: 44px;">
-        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
-        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">县</li>
+      <ul style="transform: translate3d(0, 44px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+        <li data-index="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
+        <li data-index="1" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">县</li>
       </ul>
     </div>
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">蓟县</li>
+      <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+        <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">蓟县</li>
       </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>
   </div>
 </div>
@@ -132,23 +136,24 @@ exports[`reset method 2`] = `
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
-        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
+      <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+        <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
+        <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
       </ul>
     </div>
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
-        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
+      <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+        <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
+        <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
       </ul>
     </div>
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
-        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
+      <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+        <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
+        <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
       </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>
   </div>
 </div>
@@ -163,23 +168,24 @@ exports[`watch areaList & code 1`] = `
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
-        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
+      <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+        <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
+        <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
       </ul>
     </div>
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
-        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
+      <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+        <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
+        <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
       </ul>
     </div>
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
-        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
+      <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+        <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
+        <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
       </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>
   </div>
 </div>
@@ -194,23 +200,24 @@ exports[`watch areaList & code 2`] = `
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
-        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
+      <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+        <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
+        <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
       </ul>
     </div>
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
-        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
+      <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+        <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
+        <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
       </ul>
     </div>
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
-        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
+      <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+        <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
+        <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
       </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>
   </div>
 </div>
@@ -225,23 +232,24 @@ exports[`watch areaList & code 3`] = `
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
-        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
+      <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+        <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
+        <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
       </ul>
     </div>
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
-        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
+      <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+        <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
+        <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
       </ul>
     </div>
     <div class="van-picker-column" style="height: 220px;">
-      <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
-        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
+      <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+        <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
+        <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
       </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>
   </div>
 </div>
diff --git a/packages/area/test/index.spec.js b/packages/area/test/index.spec.js
index 052f4b8d8..229fddbeb 100644
--- a/packages/area/test/index.spec.js
+++ b/packages/area/test/index.spec.js
@@ -68,10 +68,15 @@ test('change option', () => {
 
   const columns = wrapper.findAll('.van-picker-column');
   expect(wrapper).toMatchSnapshot();
+
   triggerDrag(columns.at(0), 0, -100);
+  columns.at(0).find('ul').trigger('transitionend');
   expect(wrapper).toMatchSnapshot();
+
   triggerDrag(columns.at(2), 0, -100);
+  columns.at(2).find('ul').trigger('transitionend');
   expect(wrapper).toMatchSnapshot();
+
   expect(onChange.mock.calls[0][1]).toEqual(secondOption);
 });
 
diff --git a/packages/datetime-picker/test/__snapshots__/demo.spec.js.snap b/packages/datetime-picker/test/__snapshots__/demo.spec.js.snap
index a7fd73288..162ea47d2 100644
--- a/packages/datetime-picker/test/__snapshots__/demo.spec.js.snap
+++ b/packages/datetime-picker/test/__snapshots__/demo.spec.js.snap
@@ -11,154 +11,155 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column" style="height: 220px;">
-          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">2018</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2019</li>
+          <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+            <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">2018</li>
+            <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">2019</li>
           </ul>
         </div>
         <div class="van-picker-column" style="height: 220px;">
-          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" 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>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</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;">06</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
-            <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>
+          <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+            <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">01</li>
+            <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
+            <li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
+            <li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
+            <li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
+            <li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
+            <li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
+            <li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
+            <li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
+            <li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
+            <li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
+            <li data-index="11" class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
           </ul>
         </div>
         <div class="van-picker-column" style="height: 220px;">
-          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" 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>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</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;">06</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
-            <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>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">29</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">31</li>
+          <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+            <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">01</li>
+            <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
+            <li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
+            <li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
+            <li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
+            <li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
+            <li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
+            <li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
+            <li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
+            <li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
+            <li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
+            <li data-index="11" class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
+            <li data-index="12" class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
+            <li data-index="13" class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
+            <li data-index="14" class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
+            <li data-index="15" class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
+            <li data-index="16" class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
+            <li data-index="17" class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
+            <li data-index="18" class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
+            <li data-index="19" class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
+            <li data-index="20" class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
+            <li data-index="21" class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
+            <li data-index="22" class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
+            <li data-index="23" class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
+            <li data-index="24" class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
+            <li data-index="25" class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
+            <li data-index="26" class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
+            <li data-index="27" class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
+            <li data-index="28" class="van-ellipsis van-picker-column__item" style="height: 44px;">29</li>
+            <li data-index="29" class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
+            <li data-index="30" class="van-ellipsis van-picker-column__item" style="height: 44px;">31</li>
           </ul>
         </div>
         <div class="van-picker-column" style="height: 220px;">
-          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" 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>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</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;">06</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
-            <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>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
+          <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+            <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
+            <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
+            <li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
+            <li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
+            <li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
+            <li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
+            <li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
+            <li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
+            <li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
+            <li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
+            <li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
+            <li data-index="11" class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
+            <li data-index="12" class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
+            <li data-index="13" class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
+            <li data-index="14" class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
+            <li data-index="15" class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
+            <li data-index="16" class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
+            <li data-index="17" class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
+            <li data-index="18" class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
+            <li data-index="19" class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
+            <li data-index="20" class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
+            <li data-index="21" class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
+            <li data-index="22" class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
+            <li data-index="23" class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
           </ul>
         </div>
         <div class="van-picker-column" style="height: 220px;">
-          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" 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>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</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;">06</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
-            <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>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">29</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">31</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">32</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">33</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">34</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">35</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">36</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">37</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">38</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">39</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">41</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">42</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">43</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">44</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">45</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">46</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">47</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">48</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">49</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">51</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">52</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">53</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">54</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">55</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">56</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">57</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">58</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">59</li>
+          <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+            <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
+            <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
+            <li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
+            <li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
+            <li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
+            <li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
+            <li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
+            <li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
+            <li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
+            <li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
+            <li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
+            <li data-index="11" class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
+            <li data-index="12" class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
+            <li data-index="13" class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
+            <li data-index="14" class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
+            <li data-index="15" class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
+            <li data-index="16" class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
+            <li data-index="17" class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
+            <li data-index="18" class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
+            <li data-index="19" class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
+            <li data-index="20" class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
+            <li data-index="21" class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
+            <li data-index="22" class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
+            <li data-index="23" class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
+            <li data-index="24" class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
+            <li data-index="25" class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
+            <li data-index="26" class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
+            <li data-index="27" class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
+            <li data-index="28" class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
+            <li data-index="29" class="van-ellipsis van-picker-column__item" style="height: 44px;">29</li>
+            <li data-index="30" class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
+            <li data-index="31" class="van-ellipsis van-picker-column__item" style="height: 44px;">31</li>
+            <li data-index="32" class="van-ellipsis van-picker-column__item" style="height: 44px;">32</li>
+            <li data-index="33" class="van-ellipsis van-picker-column__item" style="height: 44px;">33</li>
+            <li data-index="34" class="van-ellipsis van-picker-column__item" style="height: 44px;">34</li>
+            <li data-index="35" class="van-ellipsis van-picker-column__item" style="height: 44px;">35</li>
+            <li data-index="36" class="van-ellipsis van-picker-column__item" style="height: 44px;">36</li>
+            <li data-index="37" class="van-ellipsis van-picker-column__item" style="height: 44px;">37</li>
+            <li data-index="38" class="van-ellipsis van-picker-column__item" style="height: 44px;">38</li>
+            <li data-index="39" class="van-ellipsis van-picker-column__item" style="height: 44px;">39</li>
+            <li data-index="40" class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li>
+            <li data-index="41" class="van-ellipsis van-picker-column__item" style="height: 44px;">41</li>
+            <li data-index="42" class="van-ellipsis van-picker-column__item" style="height: 44px;">42</li>
+            <li data-index="43" class="van-ellipsis van-picker-column__item" style="height: 44px;">43</li>
+            <li data-index="44" class="van-ellipsis van-picker-column__item" style="height: 44px;">44</li>
+            <li data-index="45" class="van-ellipsis van-picker-column__item" style="height: 44px;">45</li>
+            <li data-index="46" class="van-ellipsis van-picker-column__item" style="height: 44px;">46</li>
+            <li data-index="47" class="van-ellipsis van-picker-column__item" style="height: 44px;">47</li>
+            <li data-index="48" class="van-ellipsis van-picker-column__item" style="height: 44px;">48</li>
+            <li data-index="49" class="van-ellipsis van-picker-column__item" style="height: 44px;">49</li>
+            <li data-index="50" class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li>
+            <li data-index="51" class="van-ellipsis van-picker-column__item" style="height: 44px;">51</li>
+            <li data-index="52" class="van-ellipsis van-picker-column__item" style="height: 44px;">52</li>
+            <li data-index="53" class="van-ellipsis van-picker-column__item" style="height: 44px;">53</li>
+            <li data-index="54" class="van-ellipsis van-picker-column__item" style="height: 44px;">54</li>
+            <li data-index="55" class="van-ellipsis van-picker-column__item" style="height: 44px;">55</li>
+            <li data-index="56" class="van-ellipsis van-picker-column__item" style="height: 44px;">56</li>
+            <li data-index="57" class="van-ellipsis van-picker-column__item" style="height: 44px;">57</li>
+            <li data-index="58" class="van-ellipsis van-picker-column__item" style="height: 44px;">58</li>
+            <li data-index="59" class="van-ellipsis van-picker-column__item" style="height: 44px;">59</li>
           </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>
       </div>
     </div>
@@ -172,72 +173,73 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column" style="height: 220px;">
-          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" 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>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2021</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2022</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2023</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2024</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2025</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2026</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2027</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2028</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2029</li>
+          <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+            <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">2018</li>
+            <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">2019</li>
+            <li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">2020</li>
+            <li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">2021</li>
+            <li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">2022</li>
+            <li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">2023</li>
+            <li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">2024</li>
+            <li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">2025</li>
+            <li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">2026</li>
+            <li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">2027</li>
+            <li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">2028</li>
+            <li data-index="11" class="van-ellipsis van-picker-column__item" style="height: 44px;">2029</li>
           </ul>
         </div>
         <div class="van-picker-column" style="height: 220px;">
-          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" 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>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</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;">06</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
-            <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>
+          <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+            <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">01</li>
+            <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
+            <li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
+            <li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
+            <li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
+            <li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
+            <li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
+            <li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
+            <li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
+            <li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
+            <li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
+            <li data-index="11" class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
           </ul>
         </div>
         <div class="van-picker-column" style="height: 220px;">
-          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" 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>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</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;">06</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
-            <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>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">29</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">31</li>
+          <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+            <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">01</li>
+            <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
+            <li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
+            <li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
+            <li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
+            <li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
+            <li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
+            <li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
+            <li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
+            <li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
+            <li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
+            <li data-index="11" class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
+            <li data-index="12" class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
+            <li data-index="13" class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
+            <li data-index="14" class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
+            <li data-index="15" class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
+            <li data-index="16" class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
+            <li data-index="17" class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
+            <li data-index="18" class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
+            <li data-index="19" class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
+            <li data-index="20" class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
+            <li data-index="21" class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
+            <li data-index="22" class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
+            <li data-index="23" class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
+            <li data-index="24" class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
+            <li data-index="25" class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
+            <li data-index="26" class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
+            <li data-index="27" class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
+            <li data-index="28" class="van-ellipsis van-picker-column__item" style="height: 44px;">29</li>
+            <li data-index="29" class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
+            <li data-index="30" class="van-ellipsis van-picker-column__item" style="height: 44px;">31</li>
           </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>
       </div>
     </div>
@@ -251,37 +253,38 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column" style="height: 220px;">
-          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" 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>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2021年</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2022年</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2023年</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2024年</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2025年</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2026年</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2027年</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2028年</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2029年</li>
+          <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+            <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">2018年</li>
+            <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">2019年</li>
+            <li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">2020年</li>
+            <li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">2021年</li>
+            <li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">2022年</li>
+            <li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">2023年</li>
+            <li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">2024年</li>
+            <li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">2025年</li>
+            <li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">2026年</li>
+            <li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">2027年</li>
+            <li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">2028年</li>
+            <li data-index="11" class="van-ellipsis van-picker-column__item" style="height: 44px;">2029年</li>
           </ul>
         </div>
         <div class="van-picker-column" style="height: 220px;">
-          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" 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>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">04月</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;">06月</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">07月</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">08月</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">09月</li>
-            <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>
+          <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+            <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">01月</li>
+            <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">02月</li>
+            <li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">03月</li>
+            <li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">04月</li>
+            <li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">05月</li>
+            <li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">06月</li>
+            <li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">07月</li>
+            <li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">08月</li>
+            <li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">09月</li>
+            <li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">10月</li>
+            <li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">11月</li>
+            <li data-index="11" class="van-ellipsis van-picker-column__item" style="height: 44px;">12月</li>
           </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>
       </div>
     </div>
@@ -295,84 +298,85 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column" style="height: 220px;">
-          <ul style="transition: 0ms; transform: translate3d(0, 0px, 0); 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 van-picker-column__item--selected" style="height: 44px;">12</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
+          <ul style="transform: translate3d(0, 0px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+            <li data-index="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
+            <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
+            <li data-index="2" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">12</li>
+            <li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
+            <li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
+            <li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
+            <li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
+            <li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
+            <li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
+            <li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
+            <li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
           </ul>
         </div>
         <div class="van-picker-column" style="height: 220px;">
-          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" 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>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</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;">06</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
-            <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>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">29</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">31</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">32</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">33</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">34</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">35</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">36</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">37</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">38</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">39</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">41</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">42</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">43</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">44</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">45</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">46</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">47</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">48</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">49</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">51</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">52</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">53</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">54</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">55</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">56</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">57</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">58</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">59</li>
+          <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+            <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
+            <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
+            <li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
+            <li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
+            <li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
+            <li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
+            <li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
+            <li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
+            <li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
+            <li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
+            <li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
+            <li data-index="11" class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
+            <li data-index="12" class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
+            <li data-index="13" class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
+            <li data-index="14" class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
+            <li data-index="15" class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
+            <li data-index="16" class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
+            <li data-index="17" class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
+            <li data-index="18" class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
+            <li data-index="19" class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
+            <li data-index="20" class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
+            <li data-index="21" class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
+            <li data-index="22" class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
+            <li data-index="23" class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
+            <li data-index="24" class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
+            <li data-index="25" class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
+            <li data-index="26" class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
+            <li data-index="27" class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
+            <li data-index="28" class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
+            <li data-index="29" class="van-ellipsis van-picker-column__item" style="height: 44px;">29</li>
+            <li data-index="30" class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
+            <li data-index="31" class="van-ellipsis van-picker-column__item" style="height: 44px;">31</li>
+            <li data-index="32" class="van-ellipsis van-picker-column__item" style="height: 44px;">32</li>
+            <li data-index="33" class="van-ellipsis van-picker-column__item" style="height: 44px;">33</li>
+            <li data-index="34" class="van-ellipsis van-picker-column__item" style="height: 44px;">34</li>
+            <li data-index="35" class="van-ellipsis van-picker-column__item" style="height: 44px;">35</li>
+            <li data-index="36" class="van-ellipsis van-picker-column__item" style="height: 44px;">36</li>
+            <li data-index="37" class="van-ellipsis van-picker-column__item" style="height: 44px;">37</li>
+            <li data-index="38" class="van-ellipsis van-picker-column__item" style="height: 44px;">38</li>
+            <li data-index="39" class="van-ellipsis van-picker-column__item" style="height: 44px;">39</li>
+            <li data-index="40" class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li>
+            <li data-index="41" class="van-ellipsis van-picker-column__item" style="height: 44px;">41</li>
+            <li data-index="42" class="van-ellipsis van-picker-column__item" style="height: 44px;">42</li>
+            <li data-index="43" class="van-ellipsis van-picker-column__item" style="height: 44px;">43</li>
+            <li data-index="44" class="van-ellipsis van-picker-column__item" style="height: 44px;">44</li>
+            <li data-index="45" class="van-ellipsis van-picker-column__item" style="height: 44px;">45</li>
+            <li data-index="46" class="van-ellipsis van-picker-column__item" style="height: 44px;">46</li>
+            <li data-index="47" class="van-ellipsis van-picker-column__item" style="height: 44px;">47</li>
+            <li data-index="48" class="van-ellipsis van-picker-column__item" style="height: 44px;">48</li>
+            <li data-index="49" class="van-ellipsis van-picker-column__item" style="height: 44px;">49</li>
+            <li data-index="50" class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li>
+            <li data-index="51" class="van-ellipsis van-picker-column__item" style="height: 44px;">51</li>
+            <li data-index="52" class="van-ellipsis van-picker-column__item" style="height: 44px;">52</li>
+            <li data-index="53" class="van-ellipsis van-picker-column__item" style="height: 44px;">53</li>
+            <li data-index="54" class="van-ellipsis van-picker-column__item" style="height: 44px;">54</li>
+            <li data-index="55" class="van-ellipsis van-picker-column__item" style="height: 44px;">55</li>
+            <li data-index="56" class="van-ellipsis van-picker-column__item" style="height: 44px;">56</li>
+            <li data-index="57" class="van-ellipsis van-picker-column__item" style="height: 44px;">57</li>
+            <li data-index="58" class="van-ellipsis van-picker-column__item" style="height: 44px;">58</li>
+            <li data-index="59" class="van-ellipsis van-picker-column__item" style="height: 44px;">59</li>
           </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>
       </div>
     </div>
diff --git a/packages/picker/PickerColumn.js b/packages/picker/PickerColumn.js
index 382482f4a..d427d54d6 100644
--- a/packages/picker/PickerColumn.js
+++ b/packages/picker/PickerColumn.js
@@ -1,11 +1,22 @@
 import { deepClone } from '../utils/deep-clone';
 import { use, isObj, range } from '../utils';
 import { preventDefault } from '../utils/event';
+import { TouchMixin } from '../mixins/touch';
 
 const DEFAULT_DURATION = 200;
+
+// 惯性滑动思路:
+// 在手指离开屏幕时，如果和上一次 move 时的间隔小于 `MOMENTUM_LIMIT_TIME` 且 move 距
+// 离大于 `MOMENTUM_LIMIT_DISTANCE` 时，执行惯性滑动，持续 `MOMENTUM_DURATION`
+const MOMENTUM_DURATION = 1500;
+const MOMENTUM_LIMIT_TIME = 300;
+const MOMENTUM_LIMIT_DISTANCE = 15;
+
 const [sfc, bem] = use('picker-column');
 
 export default sfc({
+  mixins: [TouchMixin],
+
   props: {
     valueKey: String,
     className: String,
@@ -17,10 +28,12 @@ export default sfc({
 
   data() {
     return {
-      startY: 0,
       offset: 0,
       duration: 0,
       startOffset: 0,
+      momentumOffset: 0,
+      touchTimestamp: 0,
+      moving: false,
       options: deepClone(this.initialOptions),
       currentIndex: this.defaultIndex
     };
@@ -50,29 +63,73 @@ export default sfc({
 
   methods: {
     onTouchStart(event) {
-      this.startY = event.touches[0].clientY;
-      this.startOffset = this.offset;
+      this.touchStart(event);
+
+      if (this.moving) {
+        const { translateY } = this.getEleTransform(this.$refs.wrapper);
+        this.startOffset = Math.min(0, translateY);
+      } else {
+        this.startOffset = this.offset;
+      }
+
       this.duration = 0;
+      this.moving = false;
+      this.transitionEndTrigger = null;
+      this.touchTimestamp = Date.now();
+      this.momentumOffset = this.startOffset;
     },
 
     onTouchMove(event) {
       preventDefault(event);
-      const deltaY = event.touches[0].clientY - this.startY;
+      this.moving = true;
+      this.touchMove(event);
       this.offset = range(
-        this.startOffset + deltaY,
+        this.startOffset + this.deltaY,
         -(this.count * this.itemHeight),
         this.itemHeight
       );
+
+      const now = Date.now();
+      if (now - this.touchTimestamp > MOMENTUM_LIMIT_TIME) {
+        this.touchTimestamp = now;
+        this.momentumOffset = this.offset;
+      }
     },
 
     onTouchEnd() {
+      const distance = this.offset - this.momentumOffset;
+      const duration = Date.now() - this.touchTimestamp;
+      const allowMomentum =
+        duration < MOMENTUM_LIMIT_TIME &&
+        Math.abs(distance) > MOMENTUM_LIMIT_DISTANCE;
+
+      if (allowMomentum) {
+        this.momentum(distance, duration);
+        return;
+      }
+
       if (this.offset !== this.startOffset) {
         this.duration = DEFAULT_DURATION;
-        const index = range(Math.round(-this.offset / this.itemHeight), 0, this.count - 1);
+        const index = this.getIndexByOffset(this.offset);
         this.setIndex(index, true);
       }
     },
 
+    onTransitionEnd() {
+      this.moving = false;
+
+      if (this.transitionEndTrigger) {
+        this.transitionEndTrigger();
+        this.transitionEndTrigger = null;
+      }
+    },
+
+    onClickItem(e) {
+      const index = Number(e.currentTarget.getAttribute('data-index'));
+      this.duration = DEFAULT_DURATION;
+      this.setIndex(index, true);
+    },
+
     adjustIndex(index) {
       index = range(index, 0, this.count);
       for (let i = index; i < this.count; i++) {
@@ -95,9 +152,19 @@ export default sfc({
       index = this.adjustIndex(index) || 0;
       this.offset = -index * this.itemHeight;
 
-      if (index !== this.currentIndex) {
-        this.currentIndex = index;
-        userAction && this.$emit('change', index);
+      const trigger = () => {
+        if (index !== this.currentIndex) {
+          this.currentIndex = index;
+          userAction && this.$emit('change', index);
+        }
+      };
+
+      // 若有触发过 `touchmove` 事件，那应该
+      // 在 `transitionend` 后再触发 `change` 事件
+      if (this.moving) {
+        this.transitionEndTrigger = trigger;
+      } else {
+        trigger();
       }
     },
 
@@ -112,7 +179,43 @@ export default sfc({
 
     getValue() {
       return this.options[this.currentIndex];
-    }
+    },
+
+    getIndexByOffset(offset) {
+      return range(
+        Math.round(-offset / this.itemHeight),
+        0,
+        this.count - 1
+      );
+    },
+
+    getEleTransform(ele) {
+      const { transform } = window.getComputedStyle(ele);
+      const matrix = transform
+        .slice(7, transform.length - 1)
+        .split(', ')
+        .map(val => Number(val));
+
+      return {
+        scaleX: matrix[0],
+        skewY: matrix[1],
+        skewX: matrix[2],
+        scaleY: matrix[3],
+        translateX: matrix[4],
+        translateY: matrix[5]
+      };
+    },
+
+    momentum(distance, duration) {
+      const speed = Math.abs(distance / duration);
+
+      distance = this.offset + speed / 0.0015 * (distance < 0 ? -1 : 1);
+
+      const index = this.getIndexByOffset(distance);
+
+      this.duration = MOMENTUM_DURATION;
+      this.setIndex(index, true);
+    },
   },
 
   render(h) {
@@ -125,8 +228,9 @@ export default sfc({
     const baseOffset = (itemHeight * (visibleItemCount - 1)) / 2;
 
     const wrapperStyle = {
-      transition: `${this.duration}ms`,
       transform: `translate3d(0, ${this.offset + baseOffset}px, 0)`,
+      transitionTimingFunction: 'cubic-bezier(0.23, 1, 0.32, 1)',
+      transitionDuration: `${this.duration}ms`,
       lineHeight: `${itemHeight}px`
     };
 
@@ -143,7 +247,11 @@ export default sfc({
         onTouchend={this.onTouchEnd}
         onTouchcancel={this.onTouchEnd}
       >
-        <ul style={wrapperStyle}>
+        <ul
+          ref="wrapper"
+          style={wrapperStyle}
+          onTransitionend={this.onTransitionEnd}
+        >
           {this.options.map((option, index) => (
             <li
               style={optionStyle}
@@ -155,9 +263,8 @@ export default sfc({
                 })
               ]}
               domPropsInnerHTML={this.getOptionText(option)}
-              onClick={() => {
-                this.setIndex(index, true);
-              }}
+              data-index={index}
+              onClick={this.onClickItem}
             />
           ))}
         </ul>
diff --git a/packages/picker/index.js b/packages/picker/index.js
index def4258e6..0fe86c795 100644
--- a/packages/picker/index.js
+++ b/packages/picker/index.js
@@ -141,6 +141,7 @@ export default sfc({
 
   render(h) {
     const { itemHeight } = this;
+    const wrapHeight = itemHeight * this.visibleItemCount;
     const columns = this.simple ? [this.columns] : this.columns;
 
     const frameStyle = {
@@ -148,7 +149,11 @@ export default sfc({
     };
 
     const columnsStyle = {
-      height: `${itemHeight * this.visibleItemCount}px`
+      height: `${wrapHeight}px`
+    };
+
+    const maskStyle = {
+      backgroundSize: `100% ${(wrapHeight - itemHeight) / 2}px`
     };
 
     const Toolbar = this.showToolbar && (
@@ -186,6 +191,7 @@ export default sfc({
               }}
             />
           ))}
+          <div class={bem('mask')} style={maskStyle} />
           <div class={['van-hairline--top-bottom', bem('frame')]} style={frameStyle} />
         </div>
       </div>
diff --git a/packages/picker/index.less b/packages/picker/index.less
index c6da47a2f..aa04139e6 100644
--- a/packages/picker/index.less
+++ b/packages/picker/index.less
@@ -55,12 +55,26 @@
     position: absolute;
     top: 50%;
     left: 0;
-    z-index: 1;
+    z-index: 3;
     width: 100%;
     transform: translateY(-50%);
     pointer-events: none;
   }
 
+  &__mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+    background-image: linear-gradient(180deg, hsla(0, 0%, 100%, .8), hsla(0, 0%, 100%, .6)),
+      linear-gradient(0deg, hsla(0, 0%, 100%, .8), hsla(0, 0%, 100%, .6));
+    background-repeat: no-repeat;
+    background-position: top, bottom;
+    pointer-events: none;
+  }
+
   &-column {
     flex: 1;
     overflow: hidden;
@@ -69,10 +83,9 @@
 
     &__item {
       padding: 0 5px;
-      color: @picker-option-text-color;
+      color: @picker-option-selected-text-color;
 
       &--selected {
-        color: @picker-option-selected-text-color;
         font-weight: 500;
       }
 
diff --git a/packages/picker/test/__snapshots__/demo.spec.js.snap b/packages/picker/test/__snapshots__/demo.spec.js.snap
index 7d5c821d3..17109cabd 100644
--- a/packages/picker/test/__snapshots__/demo.spec.js.snap
+++ b/packages/picker/test/__snapshots__/demo.spec.js.snap
@@ -7,14 +7,15 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column" style="height: 220px;">
-          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" 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>
-            <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 style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+            <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">杭州</li>
+            <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
+            <li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
+            <li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
+            <li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
           </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>
       </div>
     </div>
@@ -24,14 +25,15 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column" style="height: 220px;">
-          <ul style="transition: 0ms; transform: translate3d(0, 0px, 0); 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 van-picker-column__item--selected" 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>
+          <ul style="transform: translate3d(0, 0px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+            <li data-index="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
+            <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
+            <li data-index="2" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州</li>
+            <li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
+            <li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
           </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>
       </div>
     </div>
@@ -46,14 +48,15 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column" style="height: 220px;">
-          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" 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>
-            <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 style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+            <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">杭州</li>
+            <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
+            <li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
+            <li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
+            <li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
           </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>
       </div>
     </div>
@@ -63,12 +66,13 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column" style="height: 220px;">
-          <ul style="transition: 0ms; transform: translate3d(0, 44px, 0); 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 van-picker-column__item--selected" style="height: 44px;">宁波</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
+          <ul style="transform: translate3d(0, 44px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+            <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 44px;">杭州</li>
+            <li data-index="1" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">宁波</li>
+            <li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
           </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>
       </div>
     </div>
@@ -78,20 +82,21 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column column1" style="height: 220px;">
-          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">浙江</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">福建</li>
+          <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+            <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">浙江</li>
+            <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">福建</li>
           </ul>
         </div>
         <div class="van-picker-column column2" style="height: 220px;">
-          <ul style="transition: 0ms; transform: translate3d(0, 0px, 0); 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 van-picker-column__item--selected" 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>
+          <ul style="transform: translate3d(0, 0px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+            <li data-index="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
+            <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
+            <li data-index="2" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州</li>
+            <li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
+            <li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
           </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>
       </div>
     </div>
@@ -101,20 +106,21 @@ 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" style="height: 220px;">
-          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">浙江</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">福建</li>
+          <ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+            <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">浙江</li>
+            <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">福建</li>
           </ul>
         </div>
         <div class="van-picker-column column2" style="height: 220px;">
-          <ul style="transition: 0ms; transform: translate3d(0, 0px, 0); 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 van-picker-column__item--selected" 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>
+          <ul style="transform: translate3d(0, 0px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
+            <li data-index="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
+            <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
+            <li data-index="2" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州</li>
+            <li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
+            <li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
           </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>
       </div>
     </div>
diff --git a/packages/picker/test/__snapshots__/index.spec.js.snap b/packages/picker/test/__snapshots__/index.spec.js.snap
index dac8778fb..d4d0fd849 100644
--- a/packages/picker/test/__snapshots__/index.spec.js.snap
+++ b/packages/picker/test/__snapshots__/index.spec.js.snap
@@ -2,28 +2,28 @@
 
 exports[`column watch default index 1`] = `
 <div class="van-picker-column" style="height: 0px;">
-  <ul style="transition: 0ms; transform: translate3d(0, -75px, 0); 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 van-picker-column__item--selected" style="height: 50px;">1990</li>
-    <li class="van-ellipsis van-picker-column__item" style="height: 50px;">1991</li>
-    <li class="van-ellipsis van-picker-column__item" style="height: 50px;">1992</li>
-    <li class="van-ellipsis van-picker-column__item" style="height: 50px;">1993</li>
-    <li class="van-ellipsis van-picker-column__item" style="height: 50px;">1994</li>
-    <li class="van-ellipsis van-picker-column__item" style="height: 50px;">1995</li>
+  <ul style="transform: translate3d(0, -75px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 50px;">
+    <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">1</li>
+    <li data-index="1" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 50px;">1990</li>
+    <li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 50px;">1991</li>
+    <li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 50px;">1992</li>
+    <li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 50px;">1993</li>
+    <li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 50px;">1994</li>
+    <li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 50px;">1995</li>
   </ul>
 </div>
 `;
 
 exports[`column watch default index 2`] = `
 <div class="van-picker-column" style="height: 0px;">
-  <ul style="transition: 0ms; transform: translate3d(0, -125px, 0); 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 van-picker-column__item--selected" style="height: 50px;">1991</li>
-    <li class="van-ellipsis van-picker-column__item" style="height: 50px;">1992</li>
-    <li class="van-ellipsis van-picker-column__item" style="height: 50px;">1993</li>
-    <li class="van-ellipsis van-picker-column__item" style="height: 50px;">1994</li>
-    <li class="van-ellipsis van-picker-column__item" style="height: 50px;">1995</li>
+  <ul style="transform: translate3d(0, -125px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 50px;">
+    <li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">1</li>
+    <li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 50px;">1990</li>
+    <li data-index="2" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 50px;">1991</li>
+    <li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 50px;">1992</li>
+    <li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 50px;">1993</li>
+    <li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 50px;">1994</li>
+    <li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 50px;">1995</li>
   </ul>
 </div>
 `;
@@ -35,6 +35,7 @@ exports[`render title slot 1`] = `
   </div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
+    <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
     <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
   </div>
 </div>
diff --git a/packages/picker/test/index.spec.js b/packages/picker/test/index.spec.js
index 6813813bc..7702aadc4 100644
--- a/packages/picker/test/index.spec.js
+++ b/packages/picker/test/index.spec.js
@@ -80,25 +80,32 @@ test('set picker values', () => {
   expect(vm.getColumnValue(2)).toEqual(undefined);
 });
 
-test('drag columns', () => {
+test('drag columns', async () => {
   const wrapper = mount(Picker, {
     propsData: {
       columns
     }
   });
-  triggerDrag(wrapper.find('.van-picker-column'), 0, 0);
   triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
+  wrapper.find('.van-picker-column ul').trigger('transitionend');
+
+  // 由于在极短的时间（大约几毫秒）移动 `100px`，因此再计算惯性滚动的距离时，
+  // 会得到一个很大的值，导致会滚动到且选中列表的最后一项
   expect(wrapper.emitted('change')[0][1]).toEqual(['normal', '1990']);
 });
 
-test('drag simple columns', () => {
+test('drag simple columns', async () => {
   const wrapper = mount(Picker, {
     propsData: {
       columns: simpleColumn
     }
   });
   triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
-  expect(wrapper.emitted('change')[0][1]).toEqual('1992');
+  wrapper.find('.van-picker-column ul').trigger('transitionend');
+
+  // 由于在极短的时间（大约几毫秒）移动 `100px`，因此再计算惯性滚动的距离时，
+  // 会得到一个很大的值，导致会滚动到且选中列表的最后一项
+  expect(wrapper.emitted('change')[0][1]).toEqual('1995');
 });
 
 test('column watch default index', async () => {
@@ -132,3 +139,45 @@ test('render title slot', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('simulation finger swipe again before transitionend', () => {
+  // mock getComputedStyle
+  // see: https://github.com/jsdom/jsdom/issues/2588
+  const originGetComputedStyle = window.getComputedStyle;
+  window.getComputedStyle = ele => {
+    const style = originGetComputedStyle(ele);
+
+    return {
+      ...style,
+      transform: 'matrix(1, 0, 0, 1, 0, -5)'
+    };
+  };
+
+  const wrapper = mount(Picker, {
+    propsData: {
+      columns: simpleColumn
+    }
+  });
+
+  triggerDrag(wrapper.find('.van-picker-column'), 0, -5);
+  triggerDrag(wrapper.find('.van-picker-column'), -5, -100);
+  wrapper.find('.van-picker-column ul').trigger('transitionend');
+  expect(wrapper.emitted('change')[0][1]).toEqual('1995');
+});
+
+test('click column\'s item', () => {
+  const columns = [
+    { text: '杭州' },
+    { text: '宁波' },
+    { text: '温州', disabled: true },
+    { text: '嘉兴', disabled: true }
+  ];
+  const wrapper = mount(Picker, {
+    propsData: {
+      columns
+    }
+  });
+
+  wrapper.findAll('.van-picker-column__item').at(3).trigger('click');
+  expect(wrapper.emitted('change')[0][1]).toEqual(columns[1]);
+});