Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
1fc30ef0
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,发现更多精彩内容 >>
提交
1fc30ef0
编写于
9月 11, 2015
作者:
J
jljsj
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
updata enter-animation index.md
上级
10ad6e29
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
24 addition
and
20 deletion
+24
-20
components/enter-animation/demo/router-data.md
components/enter-animation/demo/router-data.md
+5
-5
components/enter-animation/demo/router.md
components/enter-animation/demo/router.md
+5
-5
components/enter-animation/index.md
components/enter-animation/index.md
+14
-10
未找到文件。
components/enter-animation/demo/router-data.md
浏览文件 @
1fc30ef0
...
...
@@ -13,6 +13,7 @@ var Router = ReactRouter.Router;
var
Route
=
ReactRouter
.
Route
;
var
Link
=
ReactRouter
.
Link
;
var
EnterAnimation
=
antd
.
EnterAnimation
;
var
Menu
=
antd
.
Menu
;
var
App
=
React
.
createClass
({
getInitialState
:
function
()
{
...
...
@@ -28,10 +29,10 @@ var App = React.createClass({
var
key
=
this
.
props
.
location
.
pathname
;
return
(
<
div
>
<
div
style
=
{
{
marginBottom
:
20
}
}
>
<
Link
to
=
"/page1"
onClick
=
{
this
.
clickPage
}
className
=
"ant-btn ant-btn-primary"
>
Page 1
</
Link
>
<
Link
to
=
"/page2"
onClick
=
{
this
.
clickPage
}
className
=
"ant-btn ant-btn-primary"
style
=
{
{
marginLeft
:
10
}
}
>
Page 2
</
Link
>
</
div
>
<
Menu
style
=
{
{
marginBottom
:
20
}
}
mode
=
"horizontal"
>
<
Menu
.
Item
key
=
'page1'
><
Link
to
=
"/page1"
onClick
=
{
this
.
clickPage
}
>
Page 1
</
Link
></
Menu
.
Item
>
<
Menu
.
Item
key
=
'page2'
><
Link
to
=
"/page2"
onClick
=
{
this
.
clickPage
}
>
Page 2
</
Link
></
Menu
.
Item
>
</
Menu
>
<
EnterAnimation
className
=
'demo-router-wap'
enter
=
{
this
.
state
.
enter
}
leave
=
{
this
.
state
.
leave
}
>
{
React
.
cloneElement
(
this
.
props
.
children
||
<
div
key
=
'home'
className
=
'demo-router-child'
><
h1
>
Home
</
h1
><
div
>
这是首页
</
div
></
div
>,
{
key
:
key
})
}
</
EnterAnimation
>
...
...
@@ -81,7 +82,6 @@ React.render((
<style>
#components-enter-animation-demo-router-data {
text-align: center;
margin: 20px auto;
}
.demo-router-wap{
position: relative;
...
...
components/enter-animation/demo/router.md
浏览文件 @
1fc30ef0
...
...
@@ -13,6 +13,7 @@ var Router = ReactRouter.Router;
var
Route
=
ReactRouter
.
Route
;
var
Link
=
ReactRouter
.
Link
;
var
EnterAnimation
=
antd
.
EnterAnimation
;
var
Menu
=
antd
.
Menu
;
var
App
=
React
.
createClass
({
getInitialState
:
function
()
{
...
...
@@ -28,10 +29,10 @@ var App = React.createClass({
var
key
=
this
.
props
.
location
.
pathname
;
return
(
<
div
>
<
div
style
=
{
{
marginBottom
:
20
}
}
>
<
Link
to
=
"/page1"
onClick
=
{
this
.
clickPage
}
className
=
"ant-btn ant-btn-primary"
>
Page 1
</
Link
>
<
Link
to
=
"/page2"
onClick
=
{
this
.
clickPage
}
className
=
"ant-btn ant-btn-primary"
style
=
{
{
marginLeft
:
10
}
}
>
Page 2
</
Link
>
</
div
>
<
Menu
style
=
{
{
marginBottom
:
20
}
}
mode
=
"horizontal"
>
<
Menu
.
Item
key
=
'page1'
><
Link
to
=
"/page1"
onClick
=
{
this
.
clickPage
}
>
Page 1
</
Link
></
Menu
.
Item
>
<
Menu
.
Item
key
=
'page2'
><
Link
to
=
"/page2"
onClick
=
{
this
.
clickPage
}
>
Page 2
</
Link
></
Menu
.
Item
>
</
Menu
>
<
EnterAnimation
className
=
'demo-router-wap'
enter
=
{
this
.
state
.
enter
}
leave
=
{
this
.
state
.
leave
}
>
{
React
.
cloneElement
(
this
.
props
.
children
||
<
div
key
=
'home'
className
=
'demo-router-child'
><
h1
>
Home
</
h1
><
div
>
这是首页
</
div
></
div
>,
{
key
:
key
})
}
</
EnterAnimation
>
...
...
@@ -79,7 +80,6 @@ React.render((
<style>
#components-enter-animation-demo-router {
text-align: center;
margin: 20px auto;
}
.demo-router-wap{
position: relative;
...
...
components/enter-animation/index.md
浏览文件 @
1fc30ef0
...
...
@@ -70,9 +70,9 @@ router使用方法:
|参数 |类型 |默认值 |详细 |
|-----------------|-------|-------------|----------------------------------------------------|
|type |string |
`right`
|
执行动画的内置参数
|
|style |object / string |null |同上, style 的样式动画,
`type`
有值,此项无效|
|duration |number |0.5 |每个动画的时间|
|type |string |
`right`
|
内置动画样式:
<br/>
`alpha`
`left`
`right`
`top`
`bottom`
`scale`
`scaleBig`
`scaleX`
`scaleY`
|
|style |object / string |null |同上, style 的样式动画,
`type`
有值,此项无效
。
<br/>
如
`{transform:'translateX(100px)'}`
或
`'transform: translateX(100px)'`
|
|duration |number |0.5 |每个动画的时间
,以秒为单位
|
|ease |string|
`cubic-bezier(0.165, 0.84, 0.44, 1);`
|样式缓动,只支持 css 样式缓动;|
|delay |number |0 |整个区块的延时,以秒为单位|
|upend |boolean|false |是否倒放,从最后一个dom开始往上播放|
...
...
@@ -90,19 +90,23 @@ router使用方法:
|参数 |类型 |默认值 |详细 |
|-----------------|-------|-----------|----------------------------------------------------|
|enter-data |object |
`right`
|子标签进场参数|
|data-enter |JSON String|
null |router下enter-data无效,新增dom标签,router时createClass页面里可用;
|
|data-enter |JSON String|
`right`
|router下enter-data无效,新增dom标签,router时createClass页面里可用;
<br/>
JSON String:
`'{"type":"right","delay":0.1}'`
|
|leave-data |object |
`enter-data`
|子标签出场参数|
|data-leave |JSON String|null |同
`data-enter`
|
|data-leave |JSON String|
`data-leave`
|同
`data-enter`
|
> `enter-data` 和 `data-enter` 或 `leave-data` 和 `data-leave` 共存时,合并两对象,以 xxx-data 为主。
> 比如 `enter-data` 里有 `type:'left'`, `data-enter` 也里有 `type:'right'`,取的是 `enter-data` 的 type。
#### enter-data = {} | data-enter='{"type":"right"}' | leave-data={} | data-leave='{"type":"right"}'
|参数 |类型 |默认值 |详细 |
|-----------------|-----------------|----------------|----------------------------------------------------|
|type |string |
`right`
|
内置动画样式:
<br/>
`alpha`
`left`
`right`
`top`
`bottom`
`scale`
`scaleBig`
`scaleX`
`scaleY`
|
|style |object / string |null |
动画样式,如
`transform: translateX(100px)`
,
`type`
有值此项无效
|
|duration |number |0.5 |
动画的时间,以秒为单位
,覆盖标签里的值|
|ease |string |
`cubic-bezier(0.165, 0.84, 0.44, 1)`
|
样式缓动,只支持 css 样式缓动
,覆盖标签里的值|
|delay |number |0 |动画的延时,依照结构递增以上的
`interval`
|
|type |string |
`right`
|
同标签里的
`type`
,覆盖标签里的值
|
|style |object / string |null |
同标签里的
`style`
,覆盖标签里的值
|
|duration |number |0.5 |
同标签里的
`duration`
,覆盖标签里的值|
|ease |string |
`cubic-bezier(0.165, 0.84, 0.44, 1)`
|
同标签里的
`ease`
,覆盖标签里的值|
|delay |number |0 |
当前
动画的延时,依照结构递增以上的
`interval`
|
|queueId |number |0 |动画的线程|
> 由于使用了 CSS3 动画,所以 `IE9` 及更早的版本将没有进场效果。
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录