From a1d5030174b8f51903ac6b0a00dc294c513c9abc Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 11 Sep 2015 17:11:00 +0800 Subject: [PATCH] rollback blur mask --- components/modal/confirm.jsx | 33 ----------------------------- components/modal/index.jsx | 35 +------------------------------ style/core/motion.less | 1 - style/core/motion/blur.less | 40 ------------------------------------ 4 files changed, 1 insertion(+), 108 deletions(-) delete mode 100644 style/core/motion/blur.less diff --git a/components/modal/confirm.jsx b/components/modal/confirm.jsx index 677fadfbdf..de72a817b9 100644 --- a/components/modal/confirm.jsx +++ b/components/modal/confirm.jsx @@ -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( { - 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); } }, diff --git a/style/core/motion.less b/style/core/motion.less index d059adc6d5..d90731dfe0 100644 --- a/style/core/motion.less +++ b/style/core/motion.less @@ -29,4 +29,3 @@ @import "motion/slide"; @import "motion/swing"; @import "motion/zoom"; -@import "motion/blur"; diff --git a/style/core/motion/blur.less b/style/core/motion/blur.less deleted file mode 100644 index 3a74b49317..0000000000 --- a/style/core/motion/blur.less +++ /dev/null @@ -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); - } -} -- GitLab