提交 a1d50301 编写于 作者: A afc163

rollback blur mask

上级 1f5cc32a
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,保持向下兼容
......@@ -15,37 +13,7 @@ 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
});
......@@ -116,7 +84,6 @@ export default function (props) {
div = document.createElement('div');
document.body.appendChild(div);
}
bgBlur(true);
React.render(<Dialog
prefixCls="ant-modal"
......
......@@ -3,8 +3,6 @@ import Dialog from 'rc-dialog';
import { Dom } from 'rc-util';
import confirm from './confirm';
let cssAnimation = require('css-animation');
function noop() {
}
......@@ -19,8 +17,7 @@ let AntModal = React.createClass({
onCancel: noop,
width: 520,
transitionName: 'zoom',
maskAnimation: 'fade',
bgAnimation: ' blur-enter blur-enter-active',
maskAnimation: 'fade'
};
},
......@@ -33,7 +30,6 @@ let AntModal = React.createClass({
handleCancel() {
this.props.onCancel();
this.bgBlur(false);
},
handleOk() {
......@@ -42,34 +38,6 @@ 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) {
......@@ -81,7 +49,6 @@ let AntModal = React.createClass({
newState.confirmLoading = false;
}
this.setState(newState);
this.bgBlur(nextProps.visible);
}
},
......
......@@ -29,4 +29,3 @@
@import "motion/slide";
@import "motion/swing";
@import "motion/zoom";
@import "motion/blur";
.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);
}
100% {
filter: blur(4px);
}
}
@keyframes blurOut {
0% {
filter: blur(4px);
}
100% {
filter: blur(0);
}
}
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册