<!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.jsdelivr.net/npm/vue/dist/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>
扫一扫
7980
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
