mirror of https://github.com/layui/layui
新增 layer 的 `anim` 属性的四个弹出方向的动画类
贤心
parent
646520ea02
commit
bee7e1c728
|
|
@ -43,8 +43,82 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;}
|
|||
|
||||
@-webkit-keyframes layer-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}@keyframes layer-shake{0%,100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}}.layer-anim-06{-webkit-animation-name:layer-shake;animation-name:layer-shake}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
|
||||
|
||||
/* 从上往下 */
|
||||
@keyframes layer-slide-down {
|
||||
from {
|
||||
transform: translate3d(0,-100%,0);
|
||||
} to {
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
}
|
||||
@keyframes layer-slide-down-out {
|
||||
from {
|
||||
transform: translate3d(0,0,0);
|
||||
} to {
|
||||
transform: translate3d(0,-100%,0);
|
||||
}
|
||||
}
|
||||
.layer-anim-slide-down{animation-name: layer-slide-down}
|
||||
.layer-anim-slide-down-out{animation-name: layer-slide-down-out}
|
||||
|
||||
/* 从右往左 */
|
||||
@keyframes layer-slide-left {
|
||||
from {
|
||||
transform: translate3d(100%,0,0);
|
||||
} to {
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
}
|
||||
@keyframes layer-slide-left-out {
|
||||
from {
|
||||
transform: translate3d(0,0,0);
|
||||
} to {
|
||||
transform: translate3d(100%,0,0);
|
||||
}
|
||||
}
|
||||
.layer-anim-slide-left{animation-name: layer-slide-left}
|
||||
.layer-anim-slide-left-out{animation-name: layer-slide-left-out}
|
||||
|
||||
/* 从下往上 */
|
||||
@keyframes layer-slide-up {
|
||||
from {
|
||||
transform: translate3d(0,100%,0);
|
||||
} to {
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
}
|
||||
@keyframes layer-slide-up-out {
|
||||
from {
|
||||
transform: translate3d(0,0,0);
|
||||
} to {
|
||||
transform: translate3d(0,100%,0);
|
||||
}
|
||||
}
|
||||
.layer-anim-slide-up{animation-name: layer-slide-up}
|
||||
.layer-anim-slide-up-out{animation-name: layer-slide-up-out}
|
||||
|
||||
/* 从左往右 */
|
||||
@keyframes layer-slide-right {
|
||||
from {
|
||||
transform: translate3d(-100%,0,0);
|
||||
} to {
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
}
|
||||
@keyframes layer-slide-right-out {
|
||||
from {
|
||||
transform: translate3d(0,0,0);
|
||||
} to {
|
||||
transform: translate3d(-100%,0,0);
|
||||
}
|
||||
}
|
||||
.layer-anim-slide-right{animation-name: layer-slide-right;}
|
||||
.layer-anim-slide-right-out{animation-name: layer-slide-right-out;}
|
||||
|
||||
|
||||
|
||||
/* 标题栏 */
|
||||
.layui-layer-title{padding:0 80px 0 20px; height: 50px; line-height: 50px; border-bottom:1px solid #F0F0F0; font-size: 14px; color:#333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 2px 2px 0 0;}
|
||||
.layui-layer-title{padding: 0 81px 0 16px; height: 50px; line-height: 50px; border-bottom:1px solid #F0F0F0; font-size: 14px; color:#333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 2px 2px 0 0;}
|
||||
.layui-layer-setwin{position:absolute; right: 15px; *right:0; top: 16px; font-size:0; line-height: initial;}
|
||||
.layui-layer-setwin span{position:relative; width: 16px; height: 16px; line-height: 18px; margin-left: 10px; text-align: center; font-size: 16px; cursor: pointer; color: #000; _overflow:hidden;}
|
||||
.layui-layer-setwin .layui-layer-min:before{content: ''; position: absolute; width: 12px; height: 1px; left: 50%; top: 50%; margin: -0.5px 0 0 -6px; background-color: #2E2D3C; cursor: pointer; _overflow:hidden;}
|
||||
|
|
@ -72,8 +146,8 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;}
|
|||
.layui-layer-btn-c{text-align: center;}
|
||||
|
||||
/* 定制化 */
|
||||
.layui-layer-dialog{min-width: 300px;}
|
||||
.layui-layer-dialog .layui-layer-content{position: relative; padding:20px; line-height:24px; word-break: break-all; overflow:hidden; font-size:14px; overflow-x: hidden; overflow-y:auto;}
|
||||
.layui-layer-dialog{min-width: 240px;}
|
||||
.layui-layer-dialog .layui-layer-content{position: relative; padding: 16px; line-height: 24px; word-break: break-all; overflow:hidden; font-size:14px; overflow-x: hidden; overflow-y:auto;}
|
||||
.layui-layer-dialog .layui-layer-content .layui-layer-face{position: absolute; top: 18px; left: 16px; color: #959595; font-size: 32px; _left: -40px;}
|
||||
.layui-layer-dialog .layui-layer-content .layui-icon-tips{color: #F39B12;}
|
||||
.layui-layer-dialog .layui-layer-content .layui-icon-success{color: #16b777;}
|
||||
|
|
@ -135,13 +209,13 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;}
|
|||
/* prompt模式 */
|
||||
.layui-layer-prompt .layui-layer-input{display: block; width: 260px; height: 36px; margin: 0 auto; line-height: 30px; padding-left: 10px; border: 1px solid #e6e6e6; color: #333;}
|
||||
.layui-layer-prompt textarea.layui-layer-input{width: 300px; height: 100px; line-height: 20px; padding: 6px 10px;}
|
||||
.layui-layer-prompt .layui-layer-content{padding: 20px;}
|
||||
.layui-layer-prompt .layui-layer-content{padding: 16px;}
|
||||
.layui-layer-prompt .layui-layer-btn{padding-top: 0;}
|
||||
|
||||
/* tab模式 */
|
||||
.layui-layer-tab{box-shadow:1px 1px 50px rgba(0,0,0,.4);}
|
||||
.layui-layer-tab .layui-layer-title{padding-left:0; overflow: visible;}
|
||||
.layui-layer-tab .layui-layer-title span{position:relative; float:left; min-width:80px; max-width: 300px; padding:0 20px; text-align:center; cursor:default; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; cursor: pointer;}
|
||||
.layui-layer-tab .layui-layer-title span{position:relative; float:left; min-width:80px; max-width: 300px; padding:0 16px; text-align:center; cursor:default; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; cursor: pointer;}
|
||||
.layui-layer-tab .layui-layer-title span.layui-this{height: 51px; border-left: 1px solid #eee; border-right: 1px solid #eee; background-color: #fff; z-index: 10;}
|
||||
.layui-layer-tab .layui-layer-title span:first-child{border-left:none;}
|
||||
.layui-layer-tabmain{line-height:24px; clear:both;}
|
||||
|
|
|
|||
|
|
@ -233,7 +233,24 @@ Class.pt = Class.prototype;
|
|||
|
||||
//缓存常用字符
|
||||
var doms = ['layui-layer', '.layui-layer-title', '.layui-layer-main', '.layui-layer-dialog', 'layui-layer-iframe', 'layui-layer-content', 'layui-layer-btn', 'layui-layer-close'];
|
||||
doms.anim = ['layer-anim-00', 'layer-anim-01', 'layer-anim-02', 'layer-anim-03', 'layer-anim-04', 'layer-anim-05', 'layer-anim-06'];
|
||||
|
||||
// 内置动画类
|
||||
doms.anim = {
|
||||
// 旧版动画
|
||||
0: 'layer-anim-00',
|
||||
1: 'layer-anim-01',
|
||||
2: 'layer-anim-02',
|
||||
3: 'layer-anim-03',
|
||||
4: 'layer-anim-04',
|
||||
5: 'layer-anim-05',
|
||||
6: 'layer-anim-06',
|
||||
|
||||
// 滑出方向
|
||||
slideDown: 'layer-anim-slide-down',
|
||||
slideLeft: 'layer-anim-slide-left',
|
||||
slideUp: 'layer-anim-slide-up',
|
||||
slideRight: 'layer-anim-slide-right'
|
||||
};
|
||||
|
||||
doms.SHADE = 'layui-layer-shade';
|
||||
doms.MOVE = 'layui-layer-move';
|
||||
|
|
@ -475,7 +492,7 @@ Class.pt.creat = function(){
|
|||
}, config.time);
|
||||
that.move().callback();
|
||||
|
||||
//为兼容jQuery3.0的css动画影响元素尺寸计算
|
||||
// 为兼容 jQuery3.0 的 css 动画影响元素尺寸计算
|
||||
if(doms.anim[config.anim]){
|
||||
var animClass = 'layer-anim '+ doms.anim[config.anim];
|
||||
that.layero.addClass(animClass).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
|
||||
|
|
@ -483,9 +500,12 @@ Class.pt.creat = function(){
|
|||
});
|
||||
};
|
||||
|
||||
//记录关闭动画
|
||||
// 记录关闭动画
|
||||
if(config.isOutAnim){
|
||||
that.layero.data('isOutAnim', true);
|
||||
that.layero.data({
|
||||
isOutAnim: true,
|
||||
anim: config.anim
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -1135,9 +1155,17 @@ layer.close = function(index, callback){
|
|||
index = closest.attr('times')
|
||||
,closest
|
||||
) : $('#'+ doms[0] + index)
|
||||
}()
|
||||
,type = layero.attr('type')
|
||||
,closeAnim = 'layer-anim-close';
|
||||
}();
|
||||
var type = layero.attr('type');
|
||||
var data = layero.data() || {};
|
||||
|
||||
// 关闭动画
|
||||
var closeAnim = ({
|
||||
slideDown: 'layer-anim-slide-down-out',
|
||||
slideLeft: 'layer-anim-slide-left-out',
|
||||
slideUp: 'layer-anim-slide-up-out',
|
||||
slideRight: 'layer-anim-slide-right-out'
|
||||
})[data.anim] || 'layer-anim-close';
|
||||
|
||||
if(!layero[0]) return;
|
||||
|
||||
|
|
@ -1174,7 +1202,8 @@ layer.close = function(index, callback){
|
|||
}
|
||||
};
|
||||
|
||||
if(layero.data('isOutAnim')){
|
||||
// 是否允许关闭动画
|
||||
if(data.isOutAnim){
|
||||
layero.addClass('layer-anim '+ closeAnim);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue