新增 layer 的 `anim` 属性的四个弹出方向的动画类

src/css/modules/layer.css

@@ -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{min-width: 240px;}
-.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 .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;}

src/modules/layer.js

@@ -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';
@@ -485,7 +502,10 @@ 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')
+  var type = layero.attr('type');
-  ,closeAnim = 'layer-anim-close';
+  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);
   }