feat(layer): 遮罩层添加过渡效果 (#1616)

* feat(layer): 遮罩层添加过渡效果

* refactor: 删除最大化最小化时遮罩层的过渡效果

* chore: lint

src/css/modules/layer.css

@@ -6,7 +6,7 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;}
 
 /* common */
 .layui-layer-shade, .layui-layer{position:fixed; _position:absolute; pointer-events: auto;}
-.layui-layer-shade{top:0; left:0; width:100%; height:100%; _height:expression(document.body.offsetHeight+"px");}
+.layui-layer-shade{opacity: 0; transition: opacity .35s cubic-bezier(0.34, 0.69, 0.1, 1); top:0; left:0; width:100%; height:100%; _height:expression(document.body.offsetHeight+"px");}
 .layui-layer{-webkit-overflow-scrolling: touch;}
 .layui-layer{top:150px; left: 0; margin:0; padding:0; background-color:#fff; -webkit-background-clip: content; border-radius: 2px; box-shadow: 1px 1px 50px rgba(0,0,0,.3);}
 .layui-layer-close{position:absolute;}

src/modules/layer.js

@@ -257,6 +257,7 @@ doms.anim = {
 
 doms.SHADE = 'layui-layer-shade';
 doms.MOVE = 'layui-layer-move';
+doms.SHADE_KEY = 'LAYUI-LAYER-SHADE-KEY';
 
 // 默认配置
 Class.pt.config = {
@@ -398,6 +399,21 @@ Class.pt.creat = function(){
   var conType = typeof content === 'object';
   var body = $('body');
 
+  var setAnim = function(layero){
+    // anim 兼容旧版 shift
+    if(config.shift){
+      config.anim = config.shift;
+    }
+
+    // 为兼容 jQuery3.0 的 css 动画影响元素尺寸计算
+    if(doms.anim[config.anim]){
+      var animClass = 'layer-anim '+ doms.anim[config.anim];
+      layero.addClass(animClass).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
+        $(this).removeClass(animClass);
+      });
+    }
+  }
+
   // 若 id 对应的弹层已经存在，则不重新创建
   if(config.id && $('.'+ doms[0]).find('#'+ config.id)[0]){
     return (function(){
@@ -413,6 +429,10 @@ Class.pt.creat = function(){
       } else if(options.hideOnClose){
         elemShade.show();
         layero.show();
+        setAnim(layero);
+        setTimeout(function(){
+          elemShade.css({opacity: elemShade.data(doms.SHADE_KEY)});
+        }, 10);
       }
     })();
   }
@@ -427,11 +447,6 @@ Class.pt.creat = function(){
     config.area = config.area === 'auto' ? ['', ''] : [config.area, ''];
   }
   
-  // anim 兼容旧版 shift
-  if(config.shift){
-    config.anim = config.shift;
-  }
-  
   if(layer.ie == 6){
     config.fixed = false;
   }
@@ -486,7 +501,9 @@ Class.pt.creat = function(){
   that.shadeo.css({
     'background-color': config.shade[1] || '#000'
     ,'opacity': config.shade[0] || config.shade
+    ,'transition': config.shade[2] || ''
   });
+  that.shadeo.data(doms.SHADE_KEY, config.shade[0] || config.shade);
 
   config.type == 2 && layer.ie == 6 && that.layero.find('iframe').attr('src', content[0]);
 
@@ -518,14 +535,7 @@ Class.pt.creat = function(){
     layer.close(that.index);
   }, config.time);
   that.move().callback();
-  
-  // 为兼容 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(){
-      $(this).removeClass(animClass);
-    });
-  }
+  setAnim(that.layero);
   
   // 记录配置信息
   that.layero.data('config', config);
@@ -1245,11 +1255,15 @@ layer.close = function(index, callback){
     }
   };
   // 移除遮罩
-  var removeShade = (function fn(){
-    $('#'+ doms.SHADE + index)[
-      hideOnClose ? 'hide' : 'remove'
-    ]();
-  })();
+  var shadeo = $('#'+ doms.SHADE + index);
+  if((layer.ie && layer.ie < 10) || !options.isOutAnim){
+    shadeo[hideOnClose ? 'hide' : 'remove']();
+  }else{
+    shadeo.css({opacity: 0});
+    setTimeout(function(){
+      shadeo[hideOnClose ? 'hide' : 'remove']();
+    }, 350);
+  }
   
   // 是否允许关闭动画
   if(options.isOutAnim){
@@ -1646,7 +1660,7 @@ layer.photos = function(options, loop, key){
   }
   
   dict.loadi = layer.load(1, {
-    shade: 'shade' in options ? false : 0.9,
+    shade: 'shade' in options ? false : [0.9, undefined, 'unset'],
     scrollbar: false
   });
 
@@ -1681,7 +1695,7 @@ layer.photos = function(options, loop, key){
         return [imgarea[0]+'px', imgarea[1]+'px']; 
       }(),
       title: false,
-      shade: 0.9,
+      shade: [0.9, undefined, 'unset'],
       shadeClose: true,
       closeBtn: false,
       move: '.layer-layer-photos-main img',