javascript实现弹出层效果
弹出层和弹窗相似但是并不相同；弹窗和弹出层都是由⽤户触发的显⽰提⽰信息的弹出⾯板；但是弹窗只是显⽰⼀些信息，没有太多的复杂的交互事件；⽽弹层类似⼀个整个页⾯，可以实现页⾯的所有功能；
现在前端弹层使⽤的很频繁，如⽀付宝⽀付弹层等…所以掌握弹层是⼀个很重要的技能。如果只是简单的隐藏和切换，当然就不必说，我要说的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(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);
}
}
@keyframes slideTopHide{
@include slide-top-hide;
}
@-webkit-keyframes slideTopHide{
@include slide-top-hide;
}如何启用javascript功能
@mixin slide-right{
0%{
-webkit-transform: translate3d(400%, 0, 0); -moz-transform: translate3d(400%, 0, 0); -ms-transform: translate3d(400%, 0, 0);
-o-transform: translate3d(400%, 0, 0);
transform: translate3d(400%, 0, 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 slideRight{
@include slide-right;
}
@-webkit-keyframes slideRight{
@include slide-right;
}
@mixin slide-right-hide{
0%{
-webkit-transform: translate3d(0, 0, 0);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。