弹出层和弹窗相似但是并不相同；弹窗和弹出层都是由用户触发的显示提示信息的弹出面板；但是弹窗只是显示一些信息，没有太多的复杂的交互事件；而弹层类似一个整个页面，可以实现页面的所有功能；
现在前端弹层使用的很频繁，如支付宝支付弹层等…所以掌握弹层是一个很重要的技能。如果只是简单的隐藏和切换，当然就不必说，我要说的html+animate+es6实现弹层；
html弹层结构：
<main> <header>This is Header</header> <section> <ul> <li><span data-position="top">上弹层</span></li> <li><span data-position="right">右弹层</span></li> <li><span data-position="bottom">下弹层</span></li> <li><span data-position="left">左弹层</span></li> </ul> </section> <footer>This is Footer</footer> <!-- popup --> <section> <section></section> <section> <header></header> <section></section> <footer> <ul> <li><span>取消</span></li> <li><span>确认</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; } @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); -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(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); } } @keyframes slideRightHide{ @include slide-right-hide; } @-webkit-keyframes slideRightHide{ @include slide-right-hide; } @mixin slide-bottom{ 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 slideBottom{ @include slide-bottom; } @-webkit-keyframes slideBottom{ @include slide-bottom; } @mixin slide-bottom-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 slideBottomHide{ @include slide-bottom-hide; } @-webkit-keyframes slideBottomHide{ @include slide-bottom-hide; } @mixin slide-left{ 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 slideLeft{ @include slide-left; } @-webkit-keyframes slideLeft{ @include slide-left; } @mixin slide-left-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(-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); } } @keyframes slideLeftHide{ @include slide-left-hide; } @-webkit-keyframes slideLeftHide{ @include slide-left-hide; } @mixin popup-hide{ 0%{ z-index: 99999; opacity: 1; } 100%{ z-index: -1; opacity: 0; } } @keyframes popupHide{ @include popup-hide; } @-webkit-keyframes popupHide{ @include popup-hide; } .popup{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; .popup-bg{ position: absolute; top: 0; left: 0; background: rgba(0,0,0, 0.5); width: 100%; height: 100%; z-index: 1; } .popup-wrapper{ position: relative; width: 70%; height: 70%; margin: auto; background: #fff; border-radius: 5%; z-index: 100; } &.hidden{ display: none; } &.show{ z-index: 99999; opacity: 1; &.top{ .popup-wrapper{ -webkit-animation: slideTop 0.6s linear forwards; -moz-animation: slideTop 0.6s linear forwards; -ms-animation: slideTop 0.6s linear forwards; -o-animation: slideTop 0.6s linear forwards; animation: slideTop 0.6s linear forwards; } } &.right{ .popup-wrapper{ -webkit-animation: slideRight 0.6s linear forwards; -moz-animation: slideRight 0.6s linear forwards; -ms-animation: slideRight 0.6s linear forwards; -o-animation: slideRight 0.6s linear forwards; animation: slideRight 0.6s linear forwards; } } &.bottom{ .popup-wrapper{ -webkit-animation: slideBottom 0.6s linear forwards; -moz-animation: slideBottom 0.6s linear forwards; -ms-animation: slideBottom 0.6s linear forwards; -o-animation: slideBottom 0.6s linear forwards; animation: slideBottom 0.6s linear forwards; } } &.left{ .popup-wrapper{ -webkit-animation: slideLeft 0.6s linear forwards; -moz-animation: slideLeft 0.6s linear forwards; -ms-animation: slideLeft 0.6s linear forwards; -o-animation: slideLeft 0.6s linear forwards; animation: slideLeft 0.6s linear forwards; } } } &.hide{ -webkit-animation: popupHide 0.7s linear forwards; -moz-animation: popupHide 0.7s linear forwards; -ms-animation: popupHide 0.7s linear forwards; -o-animation: popupHide 0.7s linear forwards; animation: popupHide 0.7s linear forwards; &.top{ .popup-wrapper{ -webkit-animation: slideTopHide 0.6s linear forwards; -moz-animation: slideTopHide 0.6s linear forwards; -ms-animation: slideTopHide 0.6s linear forwards; -o-animation: slideTopHide 0.6s linear forwards; animation: slideTopHide 0.6s linear forwards; } } &.right{ .popup-wrapper{ -webkit-animation: slideRightHide 0.6s linear forwards; -moz-animation: slideRightHide 0.6s linear forwards; -ms-animation: slideRightHide 0.6s linear forwards; -o-animation: slideRightHide 0.6s linear forwards; animation: slideRightHide 0.6s linear forwards; } } &.bottom{ .popup-wrapper{ -webkit-animation: slideBottomHide 0.6s linear forwards; -moz-animation: slideBottomHide 0.6s linear forwards; -ms-animation: slideBottomHide 0.6s linear forwards; -o-animation: slideBottomHide 0.6s linear forwards; animation: slideBottomHide 0.6s linear forwards; } } &.left{ .popup-wrapper{ -webkit-animation: slideLeftHide 0.6s linear forwards; -moz-animation: slideLeftHide 0.6s linear forwards; -ms-animation: slideLeftHide 0.6s linear forwards; -o-animation: slideLeftHide 0.6s linear forwards; animation: slideLeftHide 0.6s linear forwards; } } } } html, body, .main{ width: 100%; height: 100%; overflow: hidden; } .head, .body, .foot{ width: 100%; } .head, .foot{ height: 15%; } .body{ height: 70%; } .gray-theme{ background: #333; color: #fff; } .btn-list{ width: 40%; min-width: 270px; height: 38px; .btn-box{ width: 22%; height: 100%; padding-right: 4%; &:last-child{ padding-right: 0; } } } .btn{ line-height: 1em; width: 100%; height: 100%; border-radius: 10%; font-size: 16px; background: green; color: #ff0; text-align: center; vertical-align: middle; cursor: pointer; }
js代码：