选择商品属性弹框从底部弹出动画效果

以上就是我们选择商品时，会出现一个动画效果模态弹框，相关代码的实现如下：

视图层的代码:

<!-- 底部弹出规格选择 -->
  <view class="animation" wx:if="{{showView}}">
  <!-- 内容框 -->
  <view class="animation_content">
  <!-- 上部分 -->
  <view class="animation_content_top">
  <view class="pic">
  <image src="{{goods_detail.points_goods_image}}" mode="aspectFit"></image>
  </view>
  <view class="store_name">
  <view style="margin-bottom: 10px;">{{goods_detail.points_goods_name}}</view>
  <view style="color: red;">帮豆{{goods_detail.points_goods_points}} + <text style="font-size: 25rpx;">现金:{{goods_detail.points_goods_buyprice}}</text></view>
  </view>
  <view class="close_kucun">
  <icon class="iconfont icon-close c-c6" bindtap='off'></icon>
  <view style="font-size: 27rpx;color: #999;">库存：{{goods_detail.points_goods_storage}}</view>
  </view>
  </view>
  <!-- 下部分 -->
  <view class="animation_content_bottom">
  <view style="width: 20%;">购买数量</view>
  <view class="nums">
  <button bindtap="cut"> - </button>
  <view>{{num}}</view>
  <button bindtap="addition"> + </button>
  </view>
  <view>
  </view>
  </view>
  <!-- 立即兑换 -->
  <button style="background: #fe244b;color: #fff;font-size: 28rpx;" bindtap="buyNow">立即兑换</button>
  </view>
  </view>

css相关的样式

/* 底部弹框动画 */
.animation{background: rgba(0,0,0,.5);position: fixed;width: 100%;top: 0;right: 0;animation: animation 1s ease;height: 100%;z-index: 3;}
@keyframes animation{
  0%{position: fixed;width: 100%;top:500rpx;right: 0;}
  100% {position: fixed;width: 100%;bottom:0;right: 0;height: 100%;}
  }
  .animation_content{
  display: block;
  position: absolute;
   bottom:0 ;
   z-index: 4;
   width: 100%;
   background: #ffff;
  }
  .animation_content_top{
    padding: 18px 10px;
    box-sizing: border-box;
    border-bottom: 1rpx solid #999;
    display: flex;
    justify-content: space-between;
    margin-bottom: 85px;
  }
  .store_name{margin-left: 30%;font-size: 27rpx;}
  .close_kucun{display: flex;flex-direction: column;align-items: flex-end;}
  .close_kucun icon{margin-top: -18px;margin-bottom: 18px;}
 
 .animation_content_top .pic{width: 95px;height: 95px;border-radius: 10px;position: absolute;top: -25px;}
 .pic image{width: 100%;height: 100%;border-radius: 10px;}
 .animation_content_bottom {
   border-top: 1rpx solid #9999;
   padding: 10px;
   display: flex;
   justify-content: space-between;
   color: #999;
   font-size: 28rpx;
   font-weight: 400;
 }
 .animation_content_bottom .nums{width: 20%;display: flex;align-items: flex-end;margin-left: 50%;}
 .animation_content_bottom button{width: 40rpx;height: 40rpx;line-height: 40rpx;}
 .bottom_duihuan{background: #fe244b;color: #fff;font-size: 30rpx;position: fixed;width: 100%;bottom: 0;left: 0;right: 0;height: 80rpx;line-height: 80rpx;}