更新 picker样式动效

miniprogram/components/newPicker/newPicker.wxml

@@ -1,11 +1,11 @@
 <!--components/newPicker/newPicker.wxml-->
-<view wx:if="{{visable}}" style="position:fixed;top: 0;right: 0;bottom: 0;left: 0;background: #fff;z-index: 10;">
+<view class="modal {{visable?'':'modal-down'}}" style="width:100vw;height:100vh;position:fixed;top:0;left:0;background: #fff;z-index: 10;">
   <view class="df jcsa">
     <input type="text" class="search" placeholder="{{placeholder}}" bindconfirm="_getList" bindinput="_getList" value="{{label}}" />
     <view class="cancel" bindtap="cancel">返回</view>
   </view>
   <view style="position: relative;width: 90vw;margin: 0 auto;">
-    <scroll-view wx:if="{{arr.length}}" scroll-y="true" class="scroll">
+    <scroll-view style="height: calc(100vh - 200rpx);" wx:if="{{arr.length}}" scroll-y="true" class="scroll">
       <view class="items" wx:for="{{arr}}" wx:key="key" bindtap="_selectItem" data-label="{{item.value}}" data-value="{{item.key}}">
         {{item.value}}
       </view>

miniprogram/components/newPicker/newPicker.wxss

@@ -17,6 +17,7 @@
 }
 
 .items {
+  padding-left: 40rpx;
   height: 100rpx;
   line-height: 100rpx;
   border-bottom: 1rpx solid #eee;
@@ -36,4 +37,34 @@
   height: 80rpx;
   line-height: 80rpx;
   width: 50vw;
+}
+
+.modal {
+  position: absolute;
+  bottom: 0;
+  animation: moveUp 0.3s 1 forwards;
+}
+
+.modal-down {
+  animation: moveDown 0.3s 1 forwards;
+}
+
+@keyframes moveUp {
+  from {
+    top: 100vh;
+  }
+
+  to {
+    top: 0;
+  }
+}
+
+@keyframes moveDown {
+  from {
+    top: 0;
+  }
+
+  to {
+    top: 100vh;
+  }
 }