弹出层和弹窗相似但是并不相同;弹窗和弹出层都是由用户触发的显示提示信息的弹出面板;但是弹窗只是显示一些信息,没有太多的复杂的交互事件;而弹层类似一个整个页面,可以实现页面的所有功能;
现在前端弹层使用的很频繁,如支付宝支付弹层等…所以掌握弹层是一个很重要的技能。如果只是简单的隐藏和切换,当然就不必说,我要说的html+animate+es6实现弹层;
;
html弹层结构:
<main class="main">
<header class="head flex-center gray-theme">This is Header</header>
<section class="body flex-center">
<ul class="btn-list flex-center btn-group">
<li class="btn-box"><span class="btn inline-flex-center" data-position="top">上弹层</span></li>
<li class="btn-box"><span class="btn inline-flex-center" data-position="right">右弹层</span></li>
<li class="btn-box"><span class="btn inline-flex-center" data-position="bottom">下弹层</span></li>
<li class="btn-box"><span class="btn inline-flex-center" data-position="left">左弹层</span></li>
</ul>
</section>
<footer class="foot flex-center gray-theme">This is Footer</footer>
<!-- popup -->
<section class="popup flex-center hide hidden">
<section class="popup-bg"></section>
<section class="popup-wrapper">
<header class="title head flex-center"></header>
<section class="container body flex-center"></section>
<footer class="btn-wrapper foot flex-center">
<ul class="btn-list flex-center">
<li class="btn-box"><span class="btn cancel inline-flex-center">取消</span></li>
<li class="btn-box"><span class="btn confirm inline-flex-center">确认</span></li>
</ul>
</footer>
</section>
</section>
</main>
css代码:
@mixin slide-top{
0%{
-webkit-transform: translate3d(0, -400%, 0);
-moz-transform: translate3d(0, -400%, 0);
-ms-transform: translate3d(0, -400%, 0);
-o-transform: translate3d(0, -400%, 0);
transform: translate3d(0, -400%, 0);
}
100%{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideTop{
@include slide-top;
}
@-webkit-keyframes slideTop{
@include slide-top;
}
@mixin slide-top-hide{
0%{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100%{
-webkit-transform: translate3d(