Select the product attribute pop-up box to pop up the animation effect from the bottom

The above is when we choose products , An animation effect modal pop-up will appear , The relevant code is implemented as follows ：

Code of view layer :

<!--  The specification selection pops up at the bottom  -->
  <view class="animation" wx:if="{
   {showView}}">
  <!--  The content box  -->
  <view class="animation_content">
  <!--  Upper part  -->
  <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;"> Bangdou {
   {goods_detail.points_goods_points}} + <text style="font-size: 25rpx;"> cash :{
   {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;"> stock ：{
   {goods_detail.points_goods_storage}}</view>
  </view>
  </view>
  <!--  Lower part  -->
  <view class="animation_content_bottom">
  <view style="width: 20%;"> Purchase quantity </view>
  <view class="nums">
  <button bindtap="cut"> - </button>
  <view>{
   {num}}</view>
  <button bindtap="addition"> + </button>
  </view>
  <view>
  </view>
  </view>
  <!--  Exchange now  -->
  <button style="background: #fe244b;color: #fff;font-size: 28rpx;" bindtap="buyNow"> Exchange now </button>
  </view>
  </view>

css Related styles

/*  Bottom pop-up animation  */
.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;}