@import "../default-skin.less"; @import "../../global/mixin.less"; // 弹层组件 /* PC/Pad 版 Popup 层进算法： 1. 默认状态： A. 设置 c_popup 在屏幕外面：popup.style.transform = "translate3d(100%,0,0)"；IE8：o.style.display = "none"； 2. 打开第一 Group： A. 将对应 c_popupItem 设置为 o.style.visibility = "visible" B. 打开 c_popup 动画：o.style.translation = "transform 0.3s ease-out" C. 弹出 c_popup：o.style.transform = "translate3d(0,0,0)" D. 弹出完成后关闭动画：o.style.translation = "none" 3. 打开第二 Group： A. 将对应 c_popupItem 设置为 o.style.visibility = "visible"; B. 打开 c_popupBox 的动画 o.style.translation = "transform 0.3s ease-out" C. 平移 c_popupBox 到 o.style.transform = "translate3d(50%,0,0)"，IE8下：o.style.left = 0 D. 平移完成后关闭动画：o.style.translation = "none" 4. 打开第三 Group： A. 将对应 c_popupItem 设置为 o.style.visibility = "visible" B. 打开 c_popupWrapper 的动画 o.style.translation = "transform 0.3s ease-out" C. 平移 c_popupBox 到 o.style.transform = "translate3d(-12.5%,0,0)"，IE8下：o.style.left = "-12.5%" D. 平移完成后关闭动画：o.style.translation = "none" E. 隐藏第一 Group 中的 c_popupItem 设置为 o.style.visibility = "hidden" 5. 以此类推 */ .c_popup { position:absolute; top:0; left:0; bottom:0; width:100%; overflow:hidden; z-index:1000; visibility:hidden; .c_popupBg { position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.3);} .c_popupBox { width:60em; position:relative; left:30em; float:right; height:100%; overflow:hidden; .c_popupWrapper { height:100%; width:400%; .c_popupGroup { height:100%; width:12.5%; float:left; position:relative; background:@bg-dark-0-6; border-right:1px solid @fg-light-8; .x_bs; position:relative; overflow:hidden; } .c_popupItem { position:absolute; top:0; left:0; width:100%; height:100%; visibility:hidden; background:@bg-dark-0-6; } } } } // 固定 /* 为了便于组件的封装，c_popup 支持使用 “固定” 的方法在样式上脱离文档流，不必再将代码写在的直接子对象位置此方法存在的问题：在某些低端手机上显示会出现问题 */ .c_popup-fixed { position:fixed; } // 全屏宽度 .c_popup-full { // c_popupBox 必须是直接子对象，否则如果 -full 的 popup 内部套用 -wide 的 popup 会导致 float:right 不生效 > .c_popupBox { left:0; width:100%; float:none; .c_popupWrapper { width:800%;} .c_popupGroup { border-right:0 none;} } }