Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
9d5bc12d
A
ant-design
项目概览
wanjj_1210
/
ant-design
与 Fork 源项目一致
从无法访问的项目Fork
通知
10
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
A
ant-design
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
9d5bc12d
编写于
9月 11, 2015
作者:
J
jljsj
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
add modal bg blur, remove motion blur
上级
3474caac
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
113 addition
and
19 deletion
+113
-19
components/modal/confirm.jsx
components/modal/confirm.jsx
+33
-0
components/modal/index.jsx
components/modal/index.jsx
+39
-6
style/core/motion.less
style/core/motion.less
+1
-0
style/core/motion/blur.less
style/core/motion/blur.less
+40
-0
style/core/motion/zoom.less
style/core/motion/zoom.less
+0
-13
未找到文件。
components/modal/confirm.jsx
浏览文件 @
9d5bc12d
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
浏览文件 @
9d5bc12d
...
...
@@ -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
浏览文件 @
9d5bc12d
...
...
@@ -29,3 +29,4 @@
@import "motion/slide";
@import "motion/swing";
@import "motion/zoom";
@import "motion/blur";
style/core/motion/blur.less
0 → 100644
浏览文件 @
9d5bc12d
.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
浏览文件 @
9d5bc12d
...
...
@@ -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);
}
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录