之前使用小程序带的animation动画 在iphone手机上挺顺畅 但是在某些安卓手机上就会出现卡顿的情况 所以今天使用css写一个动画 在各个型号手机都可以用 而且非常流畅 不会卡顿 通用的哦
先给小伙伴们上个效果图吧（这个gif费了我老大劲才搞出来）
效果图
代码直接上 不废话
html结构
<div class="float-layout">
<!--遮罩层-->
<div class="float-mask"></div>
<!--内容-->
<div class="float-body"></div>
</div>
css动画
.float-layout {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 9999;
visibility: hidden;
transition: visibility 400ms cubic-bezier(0.36, 0.66, 0.04, 1);
&.active {
visibility: visible;
.float-mask {
opacity: 1;
}
.float-body {
transform: translate3d(0, 0, 0);
}
}
.float-mask {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(0,0,0,0.4);
opacity: 0;
transition: opacity 250ms ease-in;
}
.float-body {
position: absolute;
left: 0;
width: 100%;
bottom: 0;
background: #fff;
z-index: 11;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
transform: translate3d(0, 100%, 0);
transition: transform 320ms cubic-bezier(0.36, 0.66, 0.04, 1);
}
}
