How to animate when css div pops up from the bottom screen and the mask is placed in a div

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>trans</title>
    <script src="https://cdn.bootcss.com/vue/2.5.1/vue.js" type="text/javascript"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            border: none;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        -sharpwrap{
            width: 100%;
            height: 100%;
        }
        .box{
            width: 100%;
            height: 100%;
            background: red;
        }
        .box button{
            width: 50%;
            height: 50%;
        }
        .popup{
            
        }
        .mask{
            background-color: rgba(0,0,0,.5);
            position: fixed;
            bottom: 0;
            left: 0;
            top: 0;
            right: 0;
            opacity: 0;
            will-change: opacity;
            transition: all 0.5s;
            visibility: hidden;
        }
        /*.content{
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 80%;
            background: white;
            transform: translate(0,100%);
            transition: transform 0.5s;
        }*/
        .content{
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 20%;
            background-color: -sharpfff;
            -webkit-transform: translate3d(0,100%,0);
            transform: translate3d(0,100%,0);
            will-change: transform;
            box-shadow: 0 -1px 40px rgba(0,0,0,.3);
            -webkit-transition: -webkit-transform .3s cubic-bezier(0,0,.25,1) 80ms;
            transition: transform .3s cubic-bezier(0,0,.25,1) 80ms;
        }
        .opacity1{
            pointer-events: auto;
            opacity: 1;
        }
        .maskpop{
            pointer-events: auto;
            opacity: 1;
            visibility: visible;
            /*background-color: rgba(0,0,0,.5);*/
        }
        .trans{
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div class="box">
            <button @click="popup"></button>
        </div>
        <div class="popup">
            <div  class="mask" :class="{"maskpop":isShow}">1</div>
            <div class="content" :class="{"trans":isShow}">
                <button @click="pophide"></button>
            </div>
        </div>
    </div>
</body>
<script>
    var vm = new Vue({
        el:"-sharpwrap",
        data:{
            isShow:false
        },
        methods:{
            popup:function () {
                this.isShow = true;
                console.log(1);
            },
            pophide:function () {
                this.isShow = false;
                console.log(2);
            }
        }
    })
</script>
</html>

use visibility to control the display. After exceeding one screen, pull down to see popup. Popup uses display:block to control the display hours without animation?
the final effect I want is that the gray mask and the pop-up layer are in the same div, the mask fades in and out, and the pop-up layer slides up and down and disappears.