mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 14:13:37 +08:00
Code Issues Actions 28 Packages Projects Releases Wiki Activity

rollback blur mask

Browse Source
This commit is contained in:
afc163 2015-09-11 17:11:00 +08:00
parent 1f5cc32aaa
commit a1d5030174
4 changed files with 1 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
components/modal/confirm.jsx
View File

@ -1,13 +1,11 @@
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"

35
components/modal/index.jsx
View File

@ -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);
}
},

1
style/core/motion.less
View File

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

40
style/core/motion/blur.less
View File

@ -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);
}
}