add modal bg blur, remove motion blur

components/modal/confirm.jsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import Dialog from './index';
 let div;
+let cssAnimation = require('css-animation');
 
 export default function (props) {
   let d;
   props = props || {};
   props.iconClassName = props.iconClassName || 'anticon-question-circle';
+  props.bgAnimation = ' blur-enter blur-enter-active';
   let width = props.width || 416;
 
   // 默认为 true，保持向下兼容
@@ -13,7 +15,37 @@ export default function (props) {
     props.okCancel = true;
   }
 
+  function bgBlur(b) {
+    //增加背景模糊；
+    function seeDom(callback) {
+      for (let i = 0; i < document.body.children.length; i++) {
+        let m = document.body.children[i];
+        if (m.nodeName !== 'SCRIPT' && m.nodeName !== 'STYLE' && m.className.indexOf('ant-modal') < 0) {
+          callback.call(this, m);
+        }
+      }
+    }
+
+    if (b) {
+      //cssAnimation(document.body, 'blur-enter')
+      seeDom((m)=> {
+        m.className += props.bgAnimation;
+      });
+    } else {
+      seeDom((m)=> {
+        let rclass = /[\t\r\n\f]/g;
+        let _classname = (' ' + m.className + ' ').replace(' ' + rclass + ' ', ' ');
+        while (_classname.indexOf(props.bgAnimation) >= 0) {
+          _classname = _classname.replace(props.bgAnimation, ' ');
+        }
+        m.className = _classname.trim();
+        cssAnimation(m, 'blur-leave');
+      });
+    }
+  }
+
   function close() {
+    bgBlur(false);
     d.setState({
       visible: false
     });
@@ -84,6 +116,7 @@ export default function (props) {
     div = document.createElement('div');
     document.body.appendChild(div);
   }
+  bgBlur(true);
 
   React.render(<Dialog
     prefixCls="ant-modal"

components/modal/index.jsx

@@ -3,13 +3,15 @@ import Dialog from 'rc-dialog';
 import { Dom } from 'rc-util';
 import confirm from './confirm';
 
+let cssAnimation = require('css-animation');
+
 function noop() {
 }
 
 let mousePosition;
 let mousePositionEventBinded;
 
-let AntModal =  React.createClass({
+let AntModal = React.createClass({
   getDefaultProps() {
     return {
       prefixCls: 'ant-modal',
@@ -17,7 +19,8 @@ let AntModal =  React.createClass({
       onCancel: noop,
       width: 520,
       transitionName: 'zoom',
-      maskAnimation: 'fade'
+      maskAnimation: 'fade',
+      bgAnimation: ' blur-enter blur-enter-active',
     };
   },
 
@@ -30,6 +33,7 @@ let AntModal =  React.createClass({
 
   handleCancel() {
     this.props.onCancel();
+    this.bgBlur(false);
   },
 
   handleOk() {
@@ -38,6 +42,34 @@ let AntModal =  React.createClass({
     });
     this.props.onOk();
   },
+  bgBlur(b) {
+    //增加背景模糊；
+    function seeDom(callback) {
+      for (let i = 0; i < document.body.children.length; i++) {
+        let m = document.body.children[i];
+        if (m.nodeName !== 'SCRIPT' && m.nodeName !== 'STYLE' && m.className.indexOf('ant-modal') < 0) {
+          callback.call(this, m);
+        }
+      }
+    }
+
+    if (b) {
+      //cssAnimation(document.body, 'blur-enter')
+      seeDom((m)=> {
+        m.className += this.props.bgAnimation;
+      });
+    } else {
+      seeDom((m)=> {
+        let rclass = /[\t\r\n\f]/g;
+        let _classname = (' ' + m.className + ' ').replace(' ' + rclass + ' ', ' ');
+        while (_classname.indexOf(this.props.bgAnimation) >= 0) {
+          _classname = _classname.replace(this.props.bgAnimation, ' ');
+        }
+        m.className = _classname.trim();
+        cssAnimation(m, 'blur-leave');
+      });
+    }
+  },
 
   componentWillReceiveProps(nextProps) {
     if ('visible' in nextProps) {
@@ -49,6 +81,7 @@ let AntModal =  React.createClass({
         newState.confirmLoading = false;
       }
       this.setState(newState);
+      this.bgBlur(nextProps.visible);
     }
   },
 
@@ -89,25 +122,25 @@ let AntModal =  React.createClass({
   }
 });
 
-AntModal.info = function(props) {
+AntModal.info = function (props) {
   props.iconClassName = 'anticon-info-circle';
   props.okCancel = false;
   return confirm(props);
 };
 
-AntModal.success = function(props) {
+AntModal.success = function (props) {
   props.iconClassName = 'anticon-check-circle';
   props.okCancel = false;
   return confirm(props);
 };
 
-AntModal.error = function(props) {
+AntModal.error = function (props) {
   props.iconClassName = 'anticon-exclamation-circle';
   props.okCancel = false;
   return confirm(props);
 };
 
-AntModal.confirm = function(props) {
+AntModal.confirm = function (props) {
   props.okCancel = true;
   return confirm(props);
 };

style/core/motion.less

@@ -29,3 +29,4 @@
 @import "motion/slide";
 @import "motion/swing";
 @import "motion/zoom";
+@import "motion/blur";

style/core/motion/blur.less

@@ -0,0 +1,40 @@
+.blur-enter, .blur-appear {
+  .motion-common();
+  animation-timing-function: @ease-in-out;
+  animation-play-state: paused;
+}
+
+.blur-leave {
+  filter:blur(4px);
+  .motion-common();
+  animation-timing-function: @ease-in-out;
+  animation-play-state: paused;
+}
+
+.blur-enter.blur-enter-active, .blur-appear.blur-appear-active {
+  animation-name: blurIn;
+  animation-play-state: running;
+}
+
+.blur-leave.blur-leave-active {
+  animation-name: blurOut;
+  animation-play-state: running;
+}
+
+@keyframes blurIn {
+  0% {
+    filter: blur(0);git
+  }
+  100% {
+    filter: blur(4px);
+  }
+}
+
+@keyframes blurOut {
+  0% {
+    filter: blur(4px);
+  }
+  100% {
+    filter: blur(0);
+  }
+}

style/core/motion/zoom.less

@@ -19,32 +19,19 @@
 @keyframes zoomIn {
   0% {
     opacity: 0;
-    filter: blur(20px);
     transform: scale(0);
   }
-  50%{
-    filter: blur(5px);
-  }
   100% {
-    filter: blur(0);
     transform: scale(1);
   }
 }
 
 @keyframes zoomOut {
   0% {
-    filter: blur(0);
     transform: scale(1);
   }
-  50%{
-    filter: blur(5px);
-  }
-  90%{
-    opacity: 0.03;
-  }
   100% {
     opacity: 0;
-    filter: blur(20px);
     transform: scale(0);
   }
 }