mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 22:36:31 +08:00
rollback blur mask
This commit is contained in:
parent
1f5cc32aaa
commit
a1d5030174
@ -1,13 +1,11 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Dialog from './index';
|
import Dialog from './index';
|
||||||
let div;
|
let div;
|
||||||
let cssAnimation = require('css-animation');
|
|
||||||
|
|
||||||
export default function (props) {
|
export default function (props) {
|
||||||
let d;
|
let d;
|
||||||
props = props || {};
|
props = props || {};
|
||||||
props.iconClassName = props.iconClassName || 'anticon-question-circle';
|
props.iconClassName = props.iconClassName || 'anticon-question-circle';
|
||||||
props.bgAnimation = ' blur-enter blur-enter-active';
|
|
||||||
let width = props.width || 416;
|
let width = props.width || 416;
|
||||||
|
|
||||||
// 默认为 true,保持向下兼容
|
// 默认为 true,保持向下兼容
|
||||||
@ -15,37 +13,7 @@ export default function (props) {
|
|||||||
props.okCancel = true;
|
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() {
|
function close() {
|
||||||
bgBlur(false);
|
|
||||||
d.setState({
|
d.setState({
|
||||||
visible: false
|
visible: false
|
||||||
});
|
});
|
||||||
@ -116,7 +84,6 @@ export default function (props) {
|
|||||||
div = document.createElement('div');
|
div = document.createElement('div');
|
||||||
document.body.appendChild(div);
|
document.body.appendChild(div);
|
||||||
}
|
}
|
||||||
bgBlur(true);
|
|
||||||
|
|
||||||
React.render(<Dialog
|
React.render(<Dialog
|
||||||
prefixCls="ant-modal"
|
prefixCls="ant-modal"
|
||||||
|
@ -3,8 +3,6 @@ import Dialog from 'rc-dialog';
|
|||||||
import { Dom } from 'rc-util';
|
import { Dom } from 'rc-util';
|
||||||
import confirm from './confirm';
|
import confirm from './confirm';
|
||||||
|
|
||||||
let cssAnimation = require('css-animation');
|
|
||||||
|
|
||||||
function noop() {
|
function noop() {
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -19,8 +17,7 @@ let AntModal = React.createClass({
|
|||||||
onCancel: noop,
|
onCancel: noop,
|
||||||
width: 520,
|
width: 520,
|
||||||
transitionName: 'zoom',
|
transitionName: 'zoom',
|
||||||
maskAnimation: 'fade',
|
maskAnimation: 'fade'
|
||||||
bgAnimation: ' blur-enter blur-enter-active',
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -33,7 +30,6 @@ let AntModal = React.createClass({
|
|||||||
|
|
||||||
handleCancel() {
|
handleCancel() {
|
||||||
this.props.onCancel();
|
this.props.onCancel();
|
||||||
this.bgBlur(false);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
handleOk() {
|
handleOk() {
|
||||||
@ -42,34 +38,6 @@ let AntModal = React.createClass({
|
|||||||
});
|
});
|
||||||
this.props.onOk();
|
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) {
|
componentWillReceiveProps(nextProps) {
|
||||||
if ('visible' in nextProps) {
|
if ('visible' in nextProps) {
|
||||||
@ -81,7 +49,6 @@ let AntModal = React.createClass({
|
|||||||
newState.confirmLoading = false;
|
newState.confirmLoading = false;
|
||||||
}
|
}
|
||||||
this.setState(newState);
|
this.setState(newState);
|
||||||
this.bgBlur(nextProps.visible);
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -29,4 +29,3 @@
|
|||||||
@import "motion/slide";
|
@import "motion/slide";
|
||||||
@import "motion/swing";
|
@import "motion/swing";
|
||||||
@import "motion/zoom";
|
@import "motion/zoom";
|
||||||
@import "motion/blur";
|
|
||||||
|
@ -1,40 +0,0 @@
|
|||||||
.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);
|
|
||||||
}
|
|
||||||
}
|
|
Loading…
Reference in New Issue
Block a user