<template>
    <view class="content">
        <button type="primary" @click="toggleSpec">开启POPUP</button>
        <view
            class="popup"
            :class="specClass"
            @touchmove.stop.prevent="stopPrevent"
            @click="toggleSpec"
        >
            <!-- 遮罩层 -->
            <view class="mask"></view>
            <view class="layer attr-content" @click.stop="stopPrevent">
                <!-- 内容区域 -->
            </view>
        </view>
    </view>
</template>
<script>
   
    export default {
        data() {
            return {
                specClass: 'none',
            }
        },
        onLoad() {

        },
        methods: {
            //弹窗开关
            toggleSpec() {
                if(this.specClass === 'show'){
                    this.specClass = 'hide';
                    setTimeout(() => {
                        this.specClass = 'none';
                    }, 250);
                }else if(this.specClass === 'none'){
                    this.specClass = 'show';
                }
            },
            stopPrevent(){}
        }
    }
</script>
<style lang='scss'>
    /*  弹出层 */
    .popup {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 99;
       
        &amp;.show {
            display: block;
            .mask{
                animation: showPopup 0.2s linear both;
            }
            .layer {
                animation: showLayer 0.2s linear both;
            }
        }
        &amp;.hide {
            .mask{
                animation: hidePopup 0.2s linear both;
            }
            .layer {
                animation: hideLayer 0.2s linear both;
            }
        }
        &amp;.none {
            display: none;
        }
        .mask{
            position: fixed;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            background-color: rgba(0, 0, 0, 0.3);
        }
        .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:#fff;
               font-size: 16upx;
                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%);
            }
        }
    }
</style>