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

                     class="popup spec" 
            :class="specClass"
            @touchmove.stop.prevent="stopPrevent"
            @click="toggleSpec"
        >
            
            
            
                
                    
                    
                        ¥328.00
                        库存：188件
                        
                            已选：
                            v-for="(sItem, sIndex) in specSelected" :key="sIndex">
                                {{sItem.name}}
                            
                        
                    
                
                
                    {{item.name}}
                    
                                                     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}}
                        
                    
                
                完成
            
        

    /*  弹出层 */
    .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%);
            }
        }
    }