css div从下屏幕外往上弹出和蒙层放在一个div里面如何做到动画

发布于 2022-09-06 23:17:40 字数 3405 浏览 11 评论 0

<!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%;
        }
        #wrap{
            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: #fff;
            -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:"#wrap",
        data:{
            isShow:false
        },
        methods:{
            popup:function () {
                this.isShow = true;
                console.log(1);
            },
            pophide:function () {
                this.isShow = false;
                console.log(2);
            }
        }
    })
</script>
</html>

用visibility控制显示，在超出一屏幕后，往下拉就能看到popup。popup用display：block控制显示小时就没有动画？
我最终想要的效果是灰色蒙层和弹出层在同一个div里面，蒙层有淡入淡出的效果，弹出层上下滑动显示消失。

分享到QQ

分享到微博