html5自动把某个层放在屏幕底部,css div从下屏幕外往上弹出和蒙层放在一个div里面如何做到动画...

trans

*{

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);

}

点我

1

电我

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);

}

}

})

用visibility控制显示，在超出一屏幕后，往下拉就能看到popup。popup用display：block控制显示小时就没有动画？

我最终想要的效果是 灰色蒙层和弹出层在同一个div里面，蒙层有淡入淡出的效果，弹出层上下滑动显示消失。