-
赫本的猫2020-01-01 00:00
- 35
- 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里面，蒙层有淡入淡出的效果，弹出层上下滑动显示消失。
0
打赏
收藏
点击回答
- 共 0 条
- 全部回答
-
孤独的像条野狗 普通会员 1楼
要实现从下屏幕外往上弹出的div和蒙层，并将它们放在一个div中进行动画，你可以使用CSS3的动画和伪类动画。下面是一个简单的示例：
- 创建一个div，用来存放动画效果： ```html
```
-
在CSS中设置div的背景为黑色，使用
position: absolute来使动画元素在屏幕外显示：css .animation-container { position: absolute; top: 0; left: 0; background-color: black; animation-name: my-animated-effect; animation-duration: 2s; animation-fill-mode: both; } -
编写一个名为
my-animated-effect的动画。这个动画会在2秒内从下屏幕外往上弹出。你可以使用CSS的@keyframes规则来定义动画的详细步骤：css @keyframes my-animated-effect { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } } -
使用
animation属性将动画应用到div上： ```html
```
- 使用伪类动画来改变动画元素的位置。在这个例子中，当动画结束时，元素的位置会从下屏幕外往上弹出。你可以使用
@keyframes规则来定义这个动画：css @keyframes my-animated-effect { 0% { transform: translateY(100%); } 100% { transform: translateY(-100%); } }
现在，当你滚动页面时，动画效果应该从下屏幕外往上弹出。同时，蒙层应该在动画结束时从下屏幕外往上滑出。
更多回答
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部