css实现动画效果 animation: showLayer 0.2s linear both

news/2024/7/27 9:02:28/文章来源:https://blog.csdn.net/happyzhlb/article/details/136532379

<view
           class="popup spec"
           :class="specClass"
           @touchmove.stop.prevent="stopPrevent"
           @click="toggleSpec"
       >
           
           <view class="mask"></view>
           <view class="layer attr-content" @click.stop="stopPrevent">
               <view class="a-t">
                   <image src="https://gd3.alicdn.com/imgextra/i3/0/O1CN01IiyFQI1UGShoFKt1O_!!0-item_pic.jpg_400x400.jpg"></image>
                   <view class="right">
                       <text class="price">¥328.00</text>
                       <text class="stock">库存：188件</text>
                       <view class="selected">
                           已选：
                           <text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
                               {{sItem.name}}
                           </text>
                       </view>
                   </view>
               </view>
               <view v-for="(item,index) in specList" :key="index" class="attr-list">
                   <text>{{item.name}}</text>
                   <view class="item-list">
                       <text
                           v-for="(childItem, childIndex) in specChildList"
                           v-if="childItem.pid === item.id"
                           :key="childIndex" class="tit"
                           :class="{selected: childItem.selected}"
                           @click="selectSpec(childIndex, childItem.pid)"
                       >
                           {{childItem.name}}
                       </text>
                   </view>
               </view>
               <button class="btn" @click="toggleSpec">完成</button>
           </view>
       </view>

   /* 弹出层 */
   .popup {
       position: fixed;
       left: 0;
       top: 0;
       right: 0;
       bottom: 0;
       z-index: 99;

       &.show {
           display: block;
           .mask{
               animation: showPopup 0.2s linear both;
           }
           .layer {
               animation: showLayer 0.2s linear both;
           }
       }
       &.hide {
           .mask{
               animation: hidePopup 0.2s linear both;
           }
           .layer {
               animation: hideLayer 0.2s linear both;
           }
       }
       &.none {
           display: none;
       }
       .mask{
           position: fixed;
           top: 0;
           width: 100%;
           height: 100%;
           z-index: 1;
           background-color: rgba(0, 0, 0, 0.4);
       }
       .layer {
           position: fixed;
           z-index: 99;
           bottom: 0;
           width: 100%;
           min-height: 40vh;
           border-radius: 10upx 10upx 0 0;
           background-color: #fff;
           .btn{
               height: 66upx;
               line-height: 66upx;
               border-radius: 100upx;
               background: $uni-color-primary;
               font-size: $font-base + 2upx;
               color: #fff;
               margin: 30upx auto 20upx;
           }
       }
       @keyframes showPopup {
           0% {
               opacity: 0;
           }
           100% {
               opacity: 1;
           }
       }
       @keyframes hidePopup {
           0% {
               opacity: 1;
           }
           100% {
               opacity: 0;
           }
       }
       @keyframes showLayer {
           0% {
               transform: translateY(120%);
           }
           100% {
               transform: translateY(0%);
           }
       }
       @keyframes hideLayer {
           0% {
               transform: translateY(0);
           }
           100% {
               transform: translateY(120%);
           }
       }
   }