Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
c301c6b0
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,发现更多精彩内容 >>
提交
c301c6b0
编写于
11月 19, 2015
作者:
A
afc163
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
improve code style
上级
316a7874
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
66 addition
and
58 deletion
+66
-58
components/badge/demo/change.md
components/badge/demo/change.md
+6
-6
components/badge/index.jsx
components/badge/index.jsx
+23
-13
components/tag/index.jsx
components/tag/index.jsx
+2
-3
style/components/badge.less
style/components/badge.less
+30
-0
style/components/tag.less
style/components/tag.less
+5
-1
style/core/motion/zoom.less
style/core/motion/zoom.less
+0
-35
未找到文件。
components/badge/demo/change.md
浏览文件 @
c301c6b0
...
...
@@ -29,15 +29,15 @@ const Test = React.createClass({
this
.
setState
({
count
});
},
onClick
()
{
this
.
setState
({
show
:
!
this
.
state
.
show
});
},
this
.
setState
({
show
:
!
this
.
state
.
show
});
},
onNumberClick
(){
const
count
=
this
.
state
.
count
;
this
.
setState
({
count
:
count
?
0
:
5
})
count
:
count
?
0
:
5
})
;
},
render
()
{
return
<
div
>
...
...
components/badge/index.jsx
浏览文件 @
c301c6b0
import
React
from
'
react
'
;
import
Animate
from
'
rc-animate
'
;
const
prefixCls
=
'
ant-badge
'
;
class
AntBadge
extends
React
.
Component
{
constructor
(
props
)
{
super
(
props
);
}
render
()
{
let
count
=
this
.
props
.
count
;
let
{
count
,
prefixCls
}
=
this
.
props
;
const
dot
=
this
.
props
.
dot
;
// null undefined "" "0" 0
const
closed
=
!
count
||
count
===
'
0
'
;
const
countIsNull
=
count
===
null
?
true
:
false
;
count
=
count
>=
100
?
'
99+
'
:
count
;
// dot mode don't need count
if
(
dot
)
{
count
=
''
;
}
// null undefined "" "0" 0
const
hidden
=
(
!
count
||
count
===
'
0
'
)
&&
!
dot
;
const
className
=
prefixCls
+
(
dot
?
'
-dot
'
:
'
-count
'
);
return
(
<
span
className
=
{
prefixCls
}
title
=
{
!
countIsNull
?
count
:
''
}
{
...
this
.
props
}
>
{
this
.
props
.
children
}
<
span
className
=
{
prefixCls
}
title
=
{
count
}
{
...
this
.
props
}
>
{
this
.
props
.
children
}
<
Animate
component
=
""
showProp
=
"data-show"
transitionName
=
"zoom-badge"
transitionAppear
=
{
true
}
>
{
closed
&&
!
dot
?
null
:
<
sup
data
-
show
=
{
countIsNull
?
dot
:
!
closed
}
className
=
{
prefixCls
+
(
!
countIsNull
?
'
-count
'
:
'
-dot
'
)
}
>
{
!
countIsNull
?
count
:
''
}
</
sup
>
}
transitionName
=
{
prefixCls
+
'
-zoom
'
}
transitionAppear
=
{
true
}
>
{
hidden
?
null
:
<
sup
data
-
show
=
{
!
hidden
}
className
=
{
className
}
>
{
count
}
</
sup
>
}
</
Animate
>
</
span
>
);
...
...
@@ -31,7 +41,7 @@ class AntBadge extends React.Component {
}
AntBadge
.
defaultProps
=
{
prefixCls
:
prefixCls
,
prefixCls
:
'
ant-badge
'
,
count
:
null
,
dot
:
false
};
...
...
components/tag/index.jsx
浏览文件 @
c301c6b0
...
...
@@ -2,7 +2,6 @@ import React from 'react';
import
ReactDOM
from
'
react-dom
'
;
import
Animate
from
'
rc-animate
'
;
import
Icon
from
'
../iconfont
'
;
const
prefixCls
=
'
ant-tag
'
;
class
AntTag
extends
React
.
Component
{
constructor
(
props
)
{
...
...
@@ -42,7 +41,7 @@ class AntTag extends React.Component {
return
this
.
state
.
closed
?
null
:
<
Animate
component
=
""
showProp
=
"data-show"
transitionName
=
"zoom-tag"
transitionName
=
{
this
.
props
.
prefixCls
+
'
-zoom
'
}
onEnd
=
{
this
.
animationEnd
.
bind
(
this
)
}
>
<
div
data
-
show
=
{
!
this
.
state
.
closing
}
className
=
{
className
}
>
<
a
className
=
{
this
.
props
.
prefixCls
+
'
-text
'
}
{
...
this
.
props
}
/>
...
...
@@ -53,7 +52,7 @@ class AntTag extends React.Component {
}
AntTag
.
defaultProps
=
{
prefixCls
:
prefixCls
,
prefixCls
:
'
ant-tag
'
,
closable
:
false
,
onClose
:
function
()
{}
};
...
...
style/components/badge.less
浏览文件 @
c301c6b0
...
...
@@ -40,6 +40,17 @@
z-index: 10;
box-shadow: 0 0 0 1px #fff;
}
&-zoom-appear,
&-zoom-enter {
animation: antZoomBadgeIn .3s @ease-out-back;
animation-fill-mode: both;
}
&-zoom-leave {
animation: antZoomBadgeOut .3s @ease-in-back;
animation-fill-mode: both;
}
}
a .@{badge-prefix-cls} {
...
...
@@ -51,3 +62,22 @@ a .@{badge-prefix-cls} {
}
}
@keyframes antZoomBadgeIn {
0% {
opacity: 0;
transform: scale(0) translateX(-50%);
}
100% {
transform: scale(1) translateX(-50%);
}
}
@keyframes antZoomBadgeOut {
0% {
transform: scale(1) translateX(-50%);
}
100% {
opacity: 0;
transform: scale(0) translateX(-50%);
}
}
style/components/tag.less
浏览文件 @
c301c6b0
...
...
@@ -71,9 +71,13 @@
}
&-close {
width: 0 !important;
padding: 0;
margin-right: 0;
}
&-zoom-leave {
animation: antZoomOut .3s @ease-in-out-circ;
animation-fill-mode: both;
}
}
style/core/motion/zoom.less
浏览文件 @
c301c6b0
...
...
@@ -16,41 +16,6 @@
.zoom-motion(zoom-left, antZoomLeft);
.zoom-motion(zoom-right, antZoomRight);
.zoom-badge-appear,.zoom-badge-enter {
animation: antZoomBadgeIn .3s @ease-out-back;
animation-fill-mode: both;
}
.zoom-badge-leave {
animation: antZoomBadgeOut .3s @ease-in-back;
animation-fill-mode: both;
}
.zoom-tag-leave {
animation: antZoomOut .3s @ease-in-out-circ;
animation-fill-mode: both;
}
@keyframes antZoomBadgeIn {
0% {
opacity: 0;
transform: scale(0) translateX(-50%);
}
100% {
transform: scale(1) translateX(-50%);
}
}
@keyframes antZoomBadgeOut {
0% {
transform: scale(1) translateX(-50%);
}
100% {
opacity: 0;
transform: scale(0) translateX(-50%);
}
}
@keyframes antZoomIn {
0% {
opacity: 0;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录