From 59b1f1c4fade60cebceb35b576efa4cd877d13cf Mon Sep 17 00:00:00 2001 From: jljsj Date: Mon, 7 Sep 2015 18:37:07 +0800 Subject: [PATCH 01/20] update enter-animation --- components/enter-animation/demo/basic.md | 94 +++++----- components/enter-animation/demo/enter-data.md | 42 ++--- components/enter-animation/demo/form.md | 139 ++++++-------- components/enter-animation/demo/router.md | 177 ++++++++++++++++++ components/enter-animation/index.md | 31 ++- package.json | 2 +- 6 files changed, 333 insertions(+), 152 deletions(-) create mode 100644 components/enter-animation/demo/router.md diff --git a/components/enter-animation/demo/basic.md b/components/enter-animation/demo/basic.md index b3fcfe811d..26a28d3c7a 100644 --- a/components/enter-animation/demo/basic.md +++ b/components/enter-animation/demo/basic.md @@ -11,75 +11,77 @@ var EnterAnimation = antd.EnterAnimation; var Test = React.createClass({ - getInitialState(){ + getInitialState() { return { - direction:'enter', - upend:false, - type:'right', - interval:0.3 + enter:{ + type: 'right', + interval: 0.3, + callback:()=>{ + console.log('enter'); + } + }, + leave:{ + type: 'left', + interval: .1, + callback:()=>{ + console.log('leave'); + } + }, + bool:true, } }, - onEnter(){ + onClick() { this.setState({ - direction:'enter', - upend:false, - type:'right', - interval:0.3 - }) - }, - onLeave(){ - this.setState({ - direction:'leave', - upend:false, - type:'left', - interval:.1 + bool:!this.state.bool, + }) }, render() { return (
-
- - +
+
- -
-
- - logo -
-
    -
  • -
  • -
  • -
  • -
  • -
-
-
-
我是标题
-
+ + {this.state.bool ?
+
+
+ + logo +
  • +
  • +
-
我是标题
-
-
-
+
+
我是标题
+
  • -
  • -
+
我是标题
+
+
+
+
    +
  • +
  • +
  • +
  • +
  • +
+
+
-
-
+
+
: null}
); diff --git a/components/enter-animation/demo/enter-data.md b/components/enter-animation/demo/enter-data.md index 2e6b89b940..26a7be2a6e 100644 --- a/components/enter-animation/demo/enter-data.md +++ b/components/enter-animation/demo/enter-data.md @@ -2,7 +2,7 @@ - order: 1 -通过加上 `enter-data` 属性来指定需要动画进场的元素，并且可以定义每个元素的动画效果，用到的参数有 `type` `queueId` `delay`。 +通过加上 `enter-data` 属性来指定需要动画进场的元素，并且可以定义每个元素的动画效果。 --- @@ -13,40 +13,29 @@ var EnterAnimation = antd.EnterAnimation; var Test = React.createClass({ getInitialState(){ return { - direction:'enter', - upend:false, - type:'right', - interval:0.1, - delay:0.7 + enter:{ + type:'right', + interval:.1, + }, + leave:{ + interval:0.03 + }, + bool:true } }, - onEnter(){ + onClick(){ this.setState({ - direction:'enter', - upend:false, - type:'right', - interval:0.05, - delay:0.7 + bool:!this.state.bool }) }, - onLeave(){ - this.setState({ - direction:'leave', - upend:false, - type:'right', - interval:.03, - delay:0.1 - }) - - }, render() { return (
- - +
- + + {this.state.bool ?
@@ -69,7 +58,7 @@ var Test = React.createClass({
  • -
    我是标题
    +
    我是标题
    @@ -84,6 +73,7 @@ var Test = React.createClass({
    +
    : null}
    ) diff --git a/components/enter-animation/demo/form.md b/components/enter-animation/demo/form.md index 530cb181ca..cf2c006f4b 100644 --- a/components/enter-animation/demo/form.md +++ b/components/enter-animation/demo/form.md @@ -17,83 +17,76 @@ var RadioGroup = antd.Radio.Group; var Test = React.createClass({ getInitialState(){ return { - direction:'enter', - upend:false, - type:'right', - interval:0.1, - callback:null + enter:{ + type:'right', + callback:null, + interval:0.1 + }, + leave:{ + type:'left', + upend:true, + interval:0.05, + callback:()=>{console.log('出场结束')} + }, + bool:true } }, - onEnter(){ + onClick(){ this.setState({ - direction:'enter', - upend:false, - type:'right', - callback:null - }) - }, - onLeave(){ - this.setState({ - direction:'leave', - upend:true, - type:'bottom', - callback:function (){ - console.log('出场结束'); - } + bool:!this.state.bool }) }, render() { return ( -
    -
    - - +
    +
    + +
    + + {this.state.bool ?
    +
    + +
    +

    大眼萌 minion

    +
    +
    +
    + +
    + +
    +
    +
    + +
    + + 男的 + 女的 + +
    +
    +
    + +
    + +

    随便写点什么

    +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    : null} +
    -
    - -
    - -
    -

    大眼萌 minion

    -
    -
    -
    - -
    - -
    -
    -
    - -
    - - 男的 - 女的 - -
    -
    -
    - -
    - -

    随便写点什么

    -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -     -
    -
    ) } }); @@ -102,11 +95,3 @@ React.render( , document.getElementById('components-enter-animation-demo-form')); ```` - diff --git a/components/enter-animation/demo/router.md b/components/enter-animation/demo/router.md new file mode 100644 index 0000000000..b351127a8e --- /dev/null +++ b/components/enter-animation/demo/router.md @@ -0,0 +1,177 @@ +# 表单动画进场 + +- order: 2 + +router组全合的进场与出场动画。 + +--- + +````jsx +var ReactRouter = require('react-router'); +var history = require('react-router/lib/HashHistory').history; +var Router = ReactRouter.Router; +var Route = ReactRouter.Route; +var Link = ReactRouter.Link; +var EnterAnimation = antd.EnterAnimation; + +var App = React.createClass({ + getInitialState: function () { + return { + enter: { + type: 'margin-top:10px;opacity:0', + interval: 0.1, + delay: 0, + callback: function (e) { + console.log('我进场了', e.ReactElement.key) + }, + ease: null + }, + leave: null + }; + }, + clickPage1() { + this.setState({ + enter: { + interval: 0.03, + type: 'margin-top:10px;opacity:0', + ease: 'cubic-bezier(0.075, 0.82, 0.165, 1)', + delay:0.3, + callback: function (e) { + console.log('你点了page1,进场用的是你自定的效果', e.direction); + } + }, + leave: { + type: 'left', + upend: true, + interval:0.05, + duration:0.2, + ease: 'cubic-bezier(0.55, 0.085, 0.68, 0.53)', + delay:0.000001, + callback: function (e) { + console.log('你点了page1,出场用的是你自定的效果', e.direction); + console.log('如果你在用了的参数，在出场没有设定，那么出场没设的将用回进场那设定的参数，如upend，从最后个开始') + } + } + }) + }, + clickPage2() { + this.setState({ + enter: { + interval: 0.03, + type: 'top', + ease: null, + delay:.3, + callback: function (e) { + console.log('你点了page2,leave为null,出场进场同效果', e.direction) + } + }, + leave: { + delay:0.00001 + } + }) + }, + render() { + var key = this.props.location.pathname; + var height = 200; + switch (key) { + case '/page1': + height = 210; + break; + case '/page2': + height = 190; + break; + default : + height = 100; + } + return ( +
    +
    + Page 1 + Page 2 +
    + + {React.cloneElement(this.props.children ||

    Home

    这是首页
    , {key: key})} +     +
    + ); + } +}); + +var Page1 = React.createClass({ + render() { + return ( +
    +

    Page 1

    +

    + A link to page 1 should be active + 我是页面1

    +

    + A link to page 1 should be active + 我是页面1

    +

    + A link to page 1 should be active + 我是页面1

    +

    + A link to page 1 should be active + 我是页面1

    +

    + A link to page 1 should be active + 我是页面1

    +
    + ); + } +}); + +var Page2 = React.createClass({ + render() { + return ( +
    +

    Page 2

    +

    + a link to page 2 + 我是页面2.

    +

    + a link to page 2 + 我是页面2.

    +

    + a link to page 2 + 我是页面2.

    +

    + a link to page 2 + 我是页面2.

    +
    + ); + } +}); + +React.render(( + + + + + + +), document.getElementById('components-enter-animation-demo-router')); +```` + + diff --git a/components/enter-animation/index.md b/components/enter-animation/index.md index 920f2c648a..b82e11c47a 100644 --- a/components/enter-animation/index.md +++ b/components/enter-animation/index.md @@ -43,11 +43,31 @@ ``` +router使用方法: + +```html + + {cloneElement(this.props.children ||
    , {key: 'demo1'})} + //或者直接标签 +
    +
    依次进场
    +
    依次进场
    +
    + +``` ## API ### +|参数 |类型 |默认值 |详细 | +|-----------------|-------|-------------|----------------------------------------------------| +|enter|object| `right` |管理进场数据| +|leave|object| `right` |管理当前元素出场的数据,默认null,null继承上面所有标签的值 | +|component|string| `div` |EnterAnimation替换的标签名| + +### enter = {} | leave = {} + |参数 |类型 |默认值 |详细 | |-----------------|-------|-------------|----------------------------------------------------| |type |string |`right` |执行动画的内置参数 | @@ -60,13 +80,20 @@ |interval |number |0.1 |递增延时值，以秒为单位| |callback |function|null |动画结束回调| -### enter-data +### 一级标签key： + +|参数 |类型 |详细 | +|-----------------|-------|----------------------------------------------------| +|key|string|必需，控制进出场；| + +### enter-data | data-enter |参数 |类型 |默认值 |详细 | |-----------------|-------|-----------|----------------------------------------------------| |enter-data |object | `right` |子标签动画参数| +|data-enter |JSON String|null |router下enter-data无效，新增dom标签，router时createClass页面里可用;| -#### enter-data={} +#### enter-data = {} | data-enter='' |参数 |类型 |默认值 |详细 | |-----------------|-----------------|----------------|----------------------------------------------------| diff --git a/package.json b/package.json index 4457c9c4de..d4c54df0be 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "license": "MIT", "dependencies": { "css-animation": "~1.1.0", - "enter-animation": "~0.3.0", + "enter-animation": "~0.4.1", "gregorian-calendar": "~3.0.0", "gregorian-calendar-format": "~3.0.1", "object-assign": "~4.0.1", From 261835e78669c2e9f942322810afd85a8353c279 Mon Sep 17 00:00:00 2001 From: jljsj Date: Tue, 8 Sep 2015 18:22:30 +0800 Subject: [PATCH 02/20] update enterAnimation --- components/enter-animation/demo/enter-data.md | 2 +- components/enter-animation/demo/router.md | 64 ++++--------------- components/enter-animation/index.md | 8 +-- package.json | 2 +- 4 files changed, 19 insertions(+), 57 deletions(-) diff --git a/components/enter-animation/demo/enter-data.md b/components/enter-animation/demo/enter-data.md index 26a7be2a6e..0ead634426 100644 --- a/components/enter-animation/demo/enter-data.md +++ b/components/enter-animation/demo/enter-data.md @@ -58,7 +58,7 @@ var Test = React.createClass({
  • -
    我是标题
    +
    我是标题
    diff --git a/components/enter-animation/demo/router.md b/components/enter-animation/demo/router.md index b351127a8e..55be0f1d4a 100644 --- a/components/enter-animation/demo/router.md +++ b/components/enter-animation/demo/router.md @@ -31,22 +31,12 @@ var App = React.createClass({ }, clickPage1() { this.setState({ - enter: { - interval: 0.03, - type: 'margin-top:10px;opacity:0', - ease: 'cubic-bezier(0.075, 0.82, 0.165, 1)', - delay:0.3, + enter: {interval: 0.03,type: 'margin-top:10px;opacity:0',ease: 'cubic-bezier(0.075, 0.82, 0.165, 1)',delay:0.3, callback: function (e) { console.log('你点了page1,进场用的是你自定的效果', e.direction); } }, - leave: { - type: 'left', - upend: true, - interval:0.05, - duration:0.2, - ease: 'cubic-bezier(0.55, 0.085, 0.68, 0.53)', - delay:0.000001, + leave: {type: 'left',upend: true,interval:0.05,duration:0.2,ease: 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',delay:0, callback: function (e) { console.log('你点了page1,出场用的是你自定的效果', e.direction); console.log('如果你在用了的参数，在出场没有设定，那么出场没设的将用回进场那设定的参数，如upend，从最后个开始') @@ -56,18 +46,8 @@ var App = React.createClass({ }, clickPage2() { this.setState({ - enter: { - interval: 0.03, - type: 'top', - ease: null, - delay:.3, - callback: function (e) { - console.log('你点了page2,leave为null,出场进场同效果', e.direction) - } - }, - leave: { - delay:0.00001 - } + enter: {interval: 0.03,type: 'top',ease: null,delay:.3,callback: function (e) {console.log('你点了page2,leave为null,出场进场同效果', e.direction)}}, + leave: {delay:0} }) }, render() { @@ -102,21 +82,11 @@ var Page1 = React.createClass({ return (

    Page 1

    -

    - A link to page 1 should be active - 我是页面1

    -

    - A link to page 1 should be active - 我是页面1

    -

    - A link to page 1 should be active - 我是页面1

    -

    - A link to page 1 should be active - 我是页面1

    -

    - A link to page 1 should be active - 我是页面1

    +

    A link to page 1 should be active我是页面1

    +

    A link to page 1 should be active我是页面1

    +

    A link to page 1 should be active我是页面1

    +

    A link to page 1 should be active我是页面1

    +

    A link to page 1 should be active我是页面1

    ); } @@ -127,18 +97,10 @@ var Page2 = React.createClass({ return (

    Page 2

    -

    - a link to page 2 - 我是页面2.

    -

    - a link to page 2 - 我是页面2.

    -

    - a link to page 2 - 我是页面2.

    -

    - a link to page 2 - 我是页面2.

    +

    a link to page 2 我是页面2.

    +

    a link to page 2 我是页面2.

    +

    a link to page 2 我是页面2.

    +

    a link to page 2 我是页面2.

    ); } diff --git a/components/enter-animation/index.md b/components/enter-animation/index.md index b82e11c47a..3f9ae2db65 100644 --- a/components/enter-animation/index.md +++ b/components/enter-animation/index.md @@ -72,7 +72,6 @@ router使用方法: |-----------------|-------|-------------|----------------------------------------------------| |type |string |`right` |执行动画的内置参数 | |eStyle |string |null |同上， style 的样式动画, `type` 有值，此项无效| -|direction |string |`enter`|动画进场或出场样式,以 `enter` `leave` 两值| |duration |number |0.5 |每个动画的时间| |ease |string|`cubic-bezier(0.165, 0.84, 0.44, 1);`|样式缓动,只支持 css 样式缓动;| |delay |number |0 |整个区块的延时，以秒为单位| @@ -90,16 +89,17 @@ router使用方法: |参数 |类型 |默认值 |详细 | |-----------------|-------|-----------|----------------------------------------------------| -|enter-data |object | `right` |子标签动画参数| +|enter-data |object | `right` |子标签进场参数| |data-enter |JSON String|null |router下enter-data无效，新增dom标签，router时createClass页面里可用;| +|leave-data |object | `enter-data` |子标签出场参数| +|data-leave |JSON String|null |同 `data-enter`| -#### enter-data = {} | data-enter='' +#### enter-data = {} | data-enter='{"type":"right"}' | leave-data={} | data-leave='{"type":"right"}' |参数 |类型 |默认值 |详细 | |-----------------|-----------------|----------------|----------------------------------------------------| |type |string |`right` |内置动画样式：
    `alpha` `left` `right` `top` `bottom` `scale` `scaleBig` `scaleX` `scaleY`| |style |string |null |动画样式，如 `transform: translateX(100px)`，`type` 有值此项无效| -|direction |string |`enter` |动画进出场方向：`enter` `leave`,覆盖标签里的值| |duration |number |0.5 |动画的时间,以秒为单位,覆盖标签里的值| |ease |string |`cubic-bezier(0.165, 0.84, 0.44, 1)`|样式缓动，只支持 css 样式缓动,覆盖标签里的值| |delay |number |0 |动画的延时，依照结构递增以上的 `interval`| diff --git a/package.json b/package.json index 43bead378f..ac890cc4c4 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "license": "MIT", "dependencies": { "css-animation": "~1.1.0", - "enter-animation": "~0.4.1", + "enter-animation": "~0.4.3", "gregorian-calendar": "~3.0.0", "gregorian-calendar-format": "~3.0.1", "object-assign": "~4.0.1", From 78f298ff4bc72a165f47c7a85878bc3d18d3f491 Mon Sep 17 00:00:00 2001 From: jljsj Date: Tue, 8 Sep 2015 18:27:47 +0800 Subject: [PATCH 03/20] updata enterAnimation index.md --- components/enter-animation/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/enter-animation/index.md b/components/enter-animation/index.md index 3f9ae2db65..f24acc92fb 100644 --- a/components/enter-animation/index.md +++ b/components/enter-animation/index.md @@ -63,7 +63,7 @@ router使用方法: |参数 |类型 |默认值 |详细 | |-----------------|-------|-------------|----------------------------------------------------| |enter|object| `right` |管理进场数据| -|leave|object| `right` |管理当前元素出场的数据,默认null,null继承上面所有标签的值 | +|leave|object| null |管理当前元素出场的数据,null时继承enter里的所有标签的值 | |component|string| `div` |EnterAnimation替换的标签名| ### enter = {} | leave = {} From a48acc2fab245e13a8c28ee3dc094fe238c689ea Mon Sep 17 00:00:00 2001 From: jljsj Date: Wed, 9 Sep 2015 14:52:16 +0800 Subject: [PATCH 04/20] update enterAnimation router add --- components/enter-animation/demo/router.md | 48 +++++++---------------- package.json | 2 +- 2 files changed, 15 insertions(+), 35 deletions(-) diff --git a/components/enter-animation/demo/router.md b/components/enter-animation/demo/router.md index 55be0f1d4a..378adab237 100644 --- a/components/enter-animation/demo/router.md +++ b/components/enter-animation/demo/router.md @@ -18,7 +18,7 @@ var App = React.createClass({ getInitialState: function () { return { enter: { - type: 'margin-top:10px;opacity:0', + type: 'bottom', interval: 0.1, delay: 0, callback: function (e) { @@ -31,45 +31,29 @@ var App = React.createClass({ }, clickPage1() { this.setState({ - enter: {interval: 0.03,type: 'margin-top:10px;opacity:0',ease: 'cubic-bezier(0.075, 0.82, 0.165, 1)',delay:0.3, + enter: {interval: 0.03,type: 'right',ease: 'cubic-bezier(0.075, 0.82, 0.165, 1)',delay:0.3, callback: function (e) { - console.log('你点了page1,进场用的是你自定的效果', e.direction); + console.log('你点了page1', 'key:'+e.ReactElement.key, e.direction); } }, - leave: {type: 'left',upend: true,interval:0.05,duration:0.2,ease: 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',delay:0, - callback: function (e) { - console.log('你点了page1,出场用的是你自定的效果', e.direction); - console.log('如果你在用了的参数，在出场没有设定，那么出场没设的将用回进场那设定的参数，如upend，从最后个开始') - } - } + leave: {type: 'left',upend: true,interval:0.05,duration:0.2,ease: 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',delay:0} }) }, clickPage2() { this.setState({ - enter: {interval: 0.03,type: 'top',ease: null,delay:.3,callback: function (e) {console.log('你点了page2,leave为null,出场进场同效果', e.direction)}}, - leave: {delay:0} + enter: {interval: 0.03,type: 'bottom',ease: null,delay:.3,callback: function (e) {console.log('你点了page2', 'key:'+e.ReactElement.key, e.direction);}}, + leave: {delay:0,type:'top'} }) }, render() { var key = this.props.location.pathname; - var height = 200; - switch (key) { - case '/page1': - height = 210; - break; - case '/page2': - height = 190; - break; - default : - height = 100; - } return (
    Page 1 Page 2
    - + {React.cloneElement(this.props.children ||

    Home

    这是首页
    , {key: key})}
    @@ -79,14 +63,15 @@ var App = React.createClass({ var Page1 = React.createClass({ render() { + var enterData = {}; return (
    -

    Page 1

    -

    A link to page 1 should be active我是页面1

    -

    A link to page 1 should be active我是页面1

    -

    A link to page 1 should be active我是页面1

    -

    A link to page 1 should be active我是页面1

    -

    A link to page 1 should be active我是页面1

    +

    Page 1

    +

    A link to page 1 should be active依次进场

    +

    A link to page 1 should be active依次进场

    +

    A link to page 1 should be active依次进场

    +

    A link to page 1 should be active依次进场

    +

    A link to page 1 should be active改变样式

    ); } @@ -120,7 +105,6 @@ React.render(( #components-enter-animation-demo-router { width: 600px; text-align: center; - overflow: hidden; margin: 20px auto; } .demo-router-wap{ @@ -130,10 +114,6 @@ React.render(( margin: auto; } .demo-router-child{ - position: absolute; -} -.demo-router-child h1{ - margin:0; text-align:left; } diff --git a/package.json b/package.json index e3fa34c912..de93c992b3 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "license": "MIT", "dependencies": { "css-animation": "~1.1.0", - "enter-animation": "~0.4.3", + "enter-animation": "~0.4.5", "gregorian-calendar": "~3.0.0", "gregorian-calendar-format": "~3.0.1", "object-assign": "~4.0.1", From 3dbd766c244f7de953d0829c9e0d492105f07ce8 Mon Sep 17 00:00:00 2001 From: jljsj Date: Wed, 9 Sep 2015 15:02:37 +0800 Subject: [PATCH 05/20] updata enterAnimation router.md title --- components/enter-animation/demo/router.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/enter-animation/demo/router.md b/components/enter-animation/demo/router.md index 378adab237..29ff5f903c 100644 --- a/components/enter-animation/demo/router.md +++ b/components/enter-animation/demo/router.md @@ -1,4 +1,4 @@ -# 表单动画进场 +# Router动画进场 - order: 2 From 0c18be655656b8f43e0a52a20715cb4643469ce0 Mon Sep 17 00:00:00 2001 From: jljsj Date: Wed, 9 Sep 2015 15:05:06 +0800 Subject: [PATCH 06/20] updata enterAnimation demo text --- components/enter-animation/demo/enter-data.md | 2 +- components/enter-animation/demo/form.md | 4 ++-- components/enter-animation/demo/router.md | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/components/enter-animation/demo/enter-data.md b/components/enter-animation/demo/enter-data.md index 0ead634426..4369e90197 100644 --- a/components/enter-animation/demo/enter-data.md +++ b/components/enter-animation/demo/enter-data.md @@ -1,4 +1,4 @@ -# 指定节点动画进场 +# 指定节点动画进出场 - order: 1 diff --git a/components/enter-animation/demo/form.md b/components/enter-animation/demo/form.md index cf2c006f4b..3a5a8909c4 100644 --- a/components/enter-animation/demo/form.md +++ b/components/enter-animation/demo/form.md @@ -1,8 +1,8 @@ -# 表单动画进场 +# 表单动画进出场 - order: 2 -表单组全合的进场与出场动画。 +表单组合的进场与出场动画。 --- diff --git a/components/enter-animation/demo/router.md b/components/enter-animation/demo/router.md index 29ff5f903c..445b933fb3 100644 --- a/components/enter-animation/demo/router.md +++ b/components/enter-animation/demo/router.md @@ -1,8 +1,8 @@ -# Router动画进场 +# Router动画进出场 - order: 2 -router组全合的进场与出场动画。 +router组合的进场与出场动画。 --- From bfd173ac4ed32ee8900fbe912a14174a83a06fc1 Mon Sep 17 00:00:00 2001 From: jljsj Date: Wed, 9 Sep 2015 15:07:46 +0800 Subject: [PATCH 07/20] updata enterAnimation router deom text --- components/enter-animation/demo/router.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/components/enter-animation/demo/router.md b/components/enter-animation/demo/router.md index 445b933fb3..da123692c7 100644 --- a/components/enter-animation/demo/router.md +++ b/components/enter-animation/demo/router.md @@ -67,11 +67,11 @@ var Page1 = React.createClass({ return (

    Page 1

    -

    A link to page 1 should be active依次进场

    -

    A link to page 1 should be active依次进场

    -

    A link to page 1 should be active依次进场

    -

    A link to page 1 should be active依次进场

    -

    A link to page 1 should be active改变样式

    +

    A link to page 2 should be active依次进场

    +

    A link to page 2 should be active依次进场

    +

    A link to page 2 should be active依次进场

    +

    A link to page 2 should be active依次进场

    +

    A link to page 2 should be active改变样式

    ); } @@ -82,10 +82,10 @@ var Page2 = React.createClass({ return (

    Page 2

    -

    a link to page 2 我是页面2.

    -

    a link to page 2 我是页面2.

    -

    a link to page 2 我是页面2.

    -

    a link to page 2 我是页面2.

    +

    a link to page 1 我是页面2.

    +

    a link to page 1 我是页面2.

    +

    a link to page 1 我是页面2.

    +

    a link to page 1 我是页面2.

    ); } From 196d2cb9cf9047fa7e1b3324396f3a4fe00414f8 Mon Sep 17 00:00:00 2001 From: jljsj Date: Wed, 9 Sep 2015 17:01:29 +0800 Subject: [PATCH 08/20] updata enterAnimation index.md --- components/enter-animation/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/enter-animation/index.md b/components/enter-animation/index.md index f24acc92fb..9b7daaf2dc 100644 --- a/components/enter-animation/index.md +++ b/components/enter-animation/index.md @@ -71,7 +71,7 @@ router使用方法: |参数 |类型 |默认值 |详细 | |-----------------|-------|-------------|----------------------------------------------------| |type |string |`right` |执行动画的内置参数 | -|eStyle |string |null |同上， style 的样式动画, `type` 有值，此项无效| +|style |string |null |同上， style 的样式动画, `type` 有值，此项无效| |duration |number |0.5 |每个动画的时间| |ease |string|`cubic-bezier(0.165, 0.84, 0.44, 1);`|样式缓动,只支持 css 样式缓动;| |delay |number |0 |整个区块的延时，以秒为单位| From bee8da2f504d330d783b6c75c198a87c7958c4cb Mon Sep 17 00:00:00 2001 From: jljsj Date: Wed, 9 Sep 2015 17:08:12 +0800 Subject: [PATCH 09/20] update enterAnimation router.md --- components/enter-animation/demo/router.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/enter-animation/demo/router.md b/components/enter-animation/demo/router.md index da123692c7..4ded398ff8 100644 --- a/components/enter-animation/demo/router.md +++ b/components/enter-animation/demo/router.md @@ -53,7 +53,7 @@ var App = React.createClass({ Page 1 Page 2
    - + {React.cloneElement(this.props.children ||

    Home

    这是首页
    , {key: key})}
    @@ -65,13 +65,13 @@ var Page1 = React.createClass({ render() { var enterData = {}; return ( -
    +

    Page 1

    A link to page 2 should be active依次进场

    A link to page 2 should be active依次进场

    A link to page 2 should be active依次进场

    A link to page 2 should be active依次进场

    -

    A link to page 2 should be active改变样式

    +

    A link to page 2 should be active改变样式

    ); } @@ -80,7 +80,7 @@ var Page1 = React.createClass({ var Page2 = React.createClass({ render() { return ( -
    +

    Page 2

    a link to page 1 我是页面2.

    a link to page 1 我是页面2.

    From 6c2f15241a8ada5bad5105d9823155cf398b14c9 Mon Sep 17 00:00:00 2001 From: jljsj Date: Wed, 9 Sep 2015 17:43:40 +0800 Subject: [PATCH 10/20] update enterAnimation version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f99dd64e0f..e092c3980b 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "license": "MIT", "dependencies": { "css-animation": "~1.1.0", - "enter-animation": "~0.4.5", + "enter-animation": "~0.4.6", "gregorian-calendar": "~3.0.0", "gregorian-calendar-format": "~3.0.1", "object-assign": "~4.0.1", From d415ed456120c423460f332fe2a0cdb22afa1546 Mon Sep 17 00:00:00 2001 From: jljsj Date: Thu, 10 Sep 2015 11:21:23 +0800 Subject: [PATCH 11/20] update enterAnimation demo --- components/enter-animation/demo/basic.md | 1 - components/enter-animation/demo/enter-data.md | 1 - .../enter-animation/demo/router-data.md | 95 +++++++++++++++++++ components/enter-animation/demo/router.md | 58 ++++------- components/enter-animation/index.md | 2 +- 5 files changed, 112 insertions(+), 45 deletions(-) create mode 100644 components/enter-animation/demo/router-data.md diff --git a/components/enter-animation/demo/basic.md b/components/enter-animation/demo/basic.md index 26a28d3c7a..04d36170bc 100644 --- a/components/enter-animation/demo/basic.md +++ b/components/enter-animation/demo/basic.md @@ -94,7 +94,6 @@ React.render( diff --git a/components/enter-animation/demo/router.md b/components/enter-animation/demo/router.md index 4ded398ff8..71e74eb9dc 100644 --- a/components/enter-animation/demo/router.md +++ b/components/enter-animation/demo/router.md @@ -1,6 +1,6 @@ -# Router动画进出场 +# Router默认进出场 -- order: 2 +- order: 3 router组合的进场与出场动画。 @@ -15,43 +15,22 @@ var Link = ReactRouter.Link; var EnterAnimation = antd.EnterAnimation; var App = React.createClass({ - getInitialState: function () { - return { - enter: { - type: 'bottom', - interval: 0.1, - delay: 0, - callback: function (e) { - console.log('我进场了', e.ReactElement.key) - }, - ease: null - }, - leave: null - }; + getInitialState: function () { + return {}; }, - clickPage1() { + clickPage() { this.setState({ - enter: {interval: 0.03,type: 'right',ease: 'cubic-bezier(0.075, 0.82, 0.165, 1)',delay:0.3, - callback: function (e) { - console.log('你点了page1', 'key:'+e.ReactElement.key, e.direction); - } - }, - leave: {type: 'left',upend: true,interval:0.05,duration:0.2,ease: 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',delay:0} - }) - }, - clickPage2() { - this.setState({ - enter: {interval: 0.03,type: 'bottom',ease: null,delay:.3,callback: function (e) {console.log('你点了page2', 'key:'+e.ReactElement.key, e.direction);}}, - leave: {delay:0,type:'top'} - }) + enter: {delay:0.3}, + leave: {delay:0} + }); }, render() { var key = this.props.location.pathname; return (
    - Page 1 - Page 2 + Page 1 + Page 2
    {React.cloneElement(this.props.children ||

    Home

    这是首页
    , {key: key})} @@ -60,23 +39,20 @@ var App = React.createClass({ ); } }); - var Page1 = React.createClass({ render() { - var enterData = {}; return (
    -

    Page 1

    -

    A link to page 2 should be active依次进场

    -

    A link to page 2 should be active依次进场

    -

    A link to page 2 should be active依次进场

    -

    A link to page 2 should be active依次进场

    -

    A link to page 2 should be active改变样式

    +

    Page 1

    +

    A link to page 2 should be active依次进场

    +

    A link to page 2 should be active依次进场

    +

    A link to page 2 should be active依次进场

    +

    A link to page 2 should be active依次进场

    +

    A link to page 2 should be active改变样式

    ); } }); - var Page2 = React.createClass({ render() { return ( @@ -90,7 +66,6 @@ var Page2 = React.createClass({ ); } }); - React.render(( @@ -103,7 +78,6 @@ React.render(( diff --git a/components/enter-animation/index.md b/components/enter-animation/index.md index 8bf8a5d546..efcd48796a 100644 --- a/components/enter-animation/index.md +++ b/components/enter-animation/index.md @@ -71,7 +71,7 @@ router使用方法: |参数 |类型 |默认值 |详细 | |-----------------|-------|-------------|----------------------------------------------------| |type |string |`right` |执行动画的内置参数 | -|style |string |null |同上， style 的样式动画, `type` 有值，此项无效| +|style |object / string |null |同上， style 的样式动画, `type` 有值，此项无效| |duration |number |0.5 |每个动画的时间| |ease |string|`cubic-bezier(0.165, 0.84, 0.44, 1);`|样式缓动,只支持 css 样式缓动;| |delay |number |0 |整个区块的延时，以秒为单位| @@ -99,7 +99,7 @@ router使用方法: |参数 |类型 |默认值 |详细 | |-----------------|-----------------|----------------|----------------------------------------------------| |type |string |`right` |内置动画样式：
    `alpha` `left` `right` `top` `bottom` `scale` `scaleBig` `scaleX` `scaleY`| -|style |string |null |动画样式，如 `transform: translateX(100px)`，`type` 有值此项无效| +|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`| diff --git a/package.json b/package.json index e092c3980b..a9764d4cee 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "license": "MIT", "dependencies": { "css-animation": "~1.1.0", - "enter-animation": "~0.4.6", + "enter-animation": "~0.4.7", "gregorian-calendar": "~3.0.0", "gregorian-calendar-format": "~3.0.1", "object-assign": "~4.0.1", From 10ad6e29be80948bd9eeadf96b1971f44007872b Mon Sep 17 00:00:00 2001 From: jljsj Date: Thu, 10 Sep 2015 17:03:47 +0800 Subject: [PATCH 13/20] update enterAnimation version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a9764d4cee..3ef771e91c 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "license": "MIT", "dependencies": { "css-animation": "~1.1.0", - "enter-animation": "~0.4.7", + "enter-animation": "~0.4.8", "gregorian-calendar": "~3.0.0", "gregorian-calendar-format": "~3.0.1", "object-assign": "~4.0.1", From 05eaf52aca4091156d14112250b9feac6f77e7b4 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 10 Sep 2015 22:00:53 +0800 Subject: [PATCH 14/20] 0.9.0-beta9 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 720f3fef14..30b9f7c188 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "0.9.0-beta8", + "version": "0.9.0-beta9", "stableVersion": "0.8.0", "title": "Ant Design", "description": "一个 UI 设计语言", From 1fc30ef0c3576aae453d8c783635c7639c266fea Mon Sep 17 00:00:00 2001 From: jljsj Date: Fri, 11 Sep 2015 11:12:30 +0800 Subject: [PATCH 15/20] updata enter-animation index.md --- .../enter-animation/demo/router-data.md | 10 ++++---- components/enter-animation/demo/router.md | 10 ++++---- components/enter-animation/index.md | 24 +++++++++++-------- 3 files changed, 24 insertions(+), 20 deletions(-) diff --git a/components/enter-animation/demo/router-data.md b/components/enter-animation/demo/router-data.md index 703ad17a50..957a0831f5 100644 --- a/components/enter-animation/demo/router-data.md +++ b/components/enter-animation/demo/router-data.md @@ -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 (
    -
    - Page 1 - Page 2 -
    + + Page 1 + Page 2 + {React.cloneElement(this.props.children ||

    Home

    这是首页
    , {key: key})}     @@ -81,7 +82,6 @@ React.render(( diff --git a/components/enter-animation/demo/enter-leave.md b/components/enter-animation/demo/enter-leave.md new file mode 100644 index 0000000000..c68392146b --- /dev/null +++ b/components/enter-animation/demo/enter-leave.md @@ -0,0 +1,101 @@ +# 配置进出场的样式 + +- order: 1 + +配置进出场动画样式。 + + +--- + +````jsx +var EnterAnimation = antd.EnterAnimation; + +var Test = React.createClass({ + getInitialState() { + return { + enter:{ + type: 'right', + interval: 0.3, + callback:() => { + console.log('enter'); + } + }, + leave:{ + type: 'left', + interval: .1, + callback:() => { + console.log('leave'); + } + }, + bool:true, + } + }, + onClick() { + this.setState({ + bool:!this.state.bool, + + }) + }, + render() { + return ( +
    +
    + +
    + + {this.state.bool ?
    +
    +
    + + logo +
    +
      +
    • +
    • +
    • +
    • +
    • +
    +
    +
    +
    我是标题
    +
    +
      +
    • +
    • +
    • +
    +
    +
    我是标题
    +
    +
    +
    +
      +
    • +
    • +
    • +
    • +
    • +
    +
    +
    +
    +
    +
    : null} +     +
    + ); + } +}); + +React.render( +, document.getElementById('components-enter-animation-demo-enter-leave')); +```` + + diff --git a/components/enter-animation/demo/form.md b/components/enter-animation/demo/form.md index c6c81175e2..91deeed21a 100644 --- a/components/enter-animation/demo/form.md +++ b/components/enter-animation/demo/form.md @@ -1,6 +1,6 @@ # 表单动画进出场 -- order: 3 +- order: 4 表单组合的进场与出场动画。 @@ -15,35 +15,37 @@ var Radio = antd.Radio; var RadioGroup = antd.Radio.Group; var Test = React.createClass({ - getInitialState(){ + getInitialState() { return { - enter:{ - type:'right', - callback:null, - interval:0.1 + enter: { + type: 'right', + callback: null, + interval: 0.1 }, - leave:{ - type:'left', - upend:true, - interval:0.05, - callback:()=>{console.log('出场结束')} + leave: { + type: 'left', + reverse: true, + interval: 0.05, + callback: ()=> { + console.log('出场结束') + } }, - bool:true + show: true } }, - onClick(){ + onClick() { this.setState({ - bool:!this.state.bool + show: !this.state.show }) }, render() { return (
    -
    +
    - {this.state.bool ?
    + {this.state.show ?
    @@ -75,7 +77,8 @@ var Test = React.createClass({
    diff --git a/components/enter-animation/demo/router-data.md b/components/enter-animation/demo/router-data.md deleted file mode 100644 index 957a0831f5..0000000000 --- a/components/enter-animation/demo/router-data.md +++ /dev/null @@ -1,95 +0,0 @@ -# Router数据控制 - -- order: 5 - -router的data-enter和data-leave控制进出场动画。 - ---- - -````jsx -var ReactRouter = require('react-router'); -var history = require('react-router/lib/HashHistory').history; -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 () { - return {}; - }, - clickPage() { - this.setState({ - enter: {interval: 0.05,type: 'bottom',ease: 'cubic-bezier(0.075, 0.82, 0.165, 1)',delay:0.3,}, - leave: {upend: true,duration:0.2,ease: 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',delay:0}//interval与type不重写将继承enter里的数据 - }) - }, - render() { - var key = this.props.location.pathname; - return ( -
    - - Page 1 - Page 2 - - - {React.cloneElement(this.props.children ||

    Home

    这是首页
    , {key: key})} -     -
    - ); - } -}); -var Page1 = React.createClass({ - render() { - var enterData = {}; - return ( -
    -

    Page 1

    -

    A link to page 2 should be active依次进场

    -

    A link to page 2 should be active依次进场

    -

    A link to page 2 should be active依次进场

    -

    A link to page 2 should be active依次进场

    -

    A link to page 2 should be active改变样式

    -
    - ); - } -}); -var Page2 = React.createClass({ - render() { - return ( -
    -

    Page 2

    -

    a link to page 1 我是页面2.

    -

    a link to page 1 我是页面2.

    -

    a link to page 1 我是页面2.

    -

    a link to page 1 我是页面2.

    -
    - ); - } -}); - -React.render(( - - - - - - -), document.getElementById('components-enter-animation-demo-router-data')); -```` - - diff --git a/components/enter-animation/demo/router.md b/components/enter-animation/demo/router.md index 0936e95168..472e156b42 100644 --- a/components/enter-animation/demo/router.md +++ b/components/enter-animation/demo/router.md @@ -1,8 +1,8 @@ -# Router默认进出场 +# Router 默认进出场 -- order: 4 +- order: 5 -router组合的进场与出场动画。 +router 组合的进场与出场动画。 --- @@ -16,29 +16,33 @@ var EnterAnimation = antd.EnterAnimation; var Menu = antd.Menu; var App = React.createClass({ - getInitialState: function () { - return {}; - }, - clickPage() { - this.setState({ - enter: {delay:0.3}, - leave: {delay:0} - }); - }, - render() { - var key = this.props.location.pathname; - return ( -
    - - Page 1 - Page 2 - - - {React.cloneElement(this.props.children ||

    Home

    这是首页
    , {key: key})} -     -
    - ); - } + getInitialState: function () { + return {}; + }, + clickPage() { + this.setState({ + enter: {delay: 0.3}, + leave: {delay: 0} + }); + }, + render() { + var key = this.props.location.pathname; + return ( +
    + + + Page 1 + + + Page 2 + + + + {React.cloneElement(this.props.children ||

    Home

    这是首页
    , {key: key})} +     +
    + ); + } }); var Page1 = React.createClass({ render() { diff --git a/components/enter-animation/demo/style.md b/components/enter-animation/demo/style.md index 7a1ed92e47..7d2d5f14f6 100644 --- a/components/enter-animation/demo/style.md +++ b/components/enter-animation/demo/style.md @@ -1,8 +1,8 @@ -# style自定义样式动画进出场 +# style 自定义样式动画进出场 -- order: 2 +- order: 3 -通过加上属性里的 `style` 来自定义 CSS 动画进出场,为了对齐去掉了 demo 里的一些元素。 +通过加上属性里的 `style` 来自定义 CSS 动画进出场。 --- @@ -11,58 +11,58 @@ var EnterAnimation = antd.EnterAnimation; var Test = React.createClass({ - getInitialState(){ + getInitialState() { return { - enter:{ - style:{ - transform:"translateX(50px)", - opacity:0 + enter: { + style: { + transform: "translateX(50px)", + opacity: 0 }, - interval:.1, + interval: .1, }, - leave:{ - interval:0.03 + leave: { + interval: 0.03 }, - bool:true + show: true } }, - onClick(){ + onClick() { this.setState({ - bool:!this.state.bool + show: !this.state.show }) }, render() { return ( -
    -
    - -
    - - {this.state.bool ?
    -
    -
    我是标题
    -
    -
      -
    • -
    • -
    • -
    -
    -
    我是标题
    -
    -
    -
    +
    +
    + +
    + + {this.state.show ?
    +
    +
    我是标题
    +
      -
    • -
    • -
    • +
    • +
    • +
    +
    我是标题
    +
    +
    +
    +
      +
    • +
    • +
    • +
    +
    +
    -
    : null} - -
    + +
    ) } }); diff --git a/components/enter-animation/index.jsx b/components/enter-animation/index.jsx index c46ab865a5..fd4cf152c5 100644 --- a/components/enter-animation/index.jsx +++ b/components/enter-animation/index.jsx @@ -9,3 +9,4 @@ class AntEnterAnimation extends React.Component { AntEnterAnimation.to = EnterAnimation.to; export default AntEnterAnimation; + diff --git a/components/enter-animation/index.md b/components/enter-animation/index.md index 7b331d28e2..f8d63ddb41 100644 --- a/components/enter-animation/index.md +++ b/components/enter-animation/index.md @@ -28,7 +28,7 @@ ``` -如子节点有 `enter-data` 值，则只执行有 `enter-data` 的节点的动画，相反所有子节点上都没有 `enter-data` 值，则执行遍历dom下一级节点来执行动画。 +如子节点有 `enter-data` 值，则只执行有 `enter-data` 的节点的动画，相反所有子节点上都没有 `enter-data` 值，则执行遍历 dom 下一级节点来执行动画。 ```html @@ -43,7 +43,7 @@ ``` -router使用方法: +router 使用方法: ```html @@ -62,9 +62,9 @@ router使用方法: |参数 |类型 |默认值 |详细 | |-----------------|-------|-------------|----------------------------------------------------| -|enter|object| `right` |管理进场数据| -|leave|object| null |管理当前元素出场的数据,null时继承enter里的所有标签的值 | -|component|string| `div` |EnterAnimation替换的标签名| +|enter|object| `{type:'right'}` |管理进场数据| +|leave|object| null |管理当前元素出场的数据, null 时继承 enter 里的所有标签的值 | +|component|string| `div` | EnterAnimation 替换的标签名| ### enter = {} | leave = {} @@ -75,7 +75,7 @@ router使用方法: |duration |number |0.5 |每个动画的时间,以秒为单位| |ease |string|`cubic-bezier(0.165, 0.84, 0.44, 1);`|样式缓动,只支持 css 样式缓动;| |delay |number |0 |整个区块的延时，以秒为单位| -|upend |boolean|false |是否倒放,从最后一个dom开始往上播放| +|reverse |boolean|false |是否倒放,从最后一个 dom 开始往上播放| |interval |number |0.1 |递增延时值，以秒为单位| |callback |function|null |动画结束回调| @@ -85,20 +85,15 @@ router使用方法: |-----------------|-------|----------------------------------------------------| |key|string|必需，控制进出场；| -### enter-data | data-enter +### 子标签 |参数 |类型 |默认值 |详细 | |-----------------|-------|-----------|----------------------------------------------------| -|enter-data |object | `right` |子标签进场参数| -|data-enter |JSON String| `right` |router下enter-data无效，新增dom标签，router时createClass页面里可用;
    JSON String: `'{"type":"right","delay":0.1}'`| +|enter-data |object | `{type:'right'}` |子标签进场参数| |leave-data |object | `enter-data` |子标签出场参数| -|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"}' +#### enter-data = {} | leave-data = {} |参数 |类型 |默认值 |详细 | |-----------------|-----------------|----------------|----------------------------------------------------| diff --git a/package.json b/package.json index 3ef771e91c..0c2f2b19d1 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "license": "MIT", "dependencies": { "css-animation": "~1.1.0", - "enter-animation": "~0.4.8", + "enter-animation": "~0.4.9", "gregorian-calendar": "~3.0.0", "gregorian-calendar-format": "~3.0.1", "object-assign": "~4.0.1", From d3f40e37c52f35679ad98a6e1537e99f2d11da61 Mon Sep 17 00:00:00 2001 From: jljsj Date: Fri, 11 Sep 2015 13:38:40 +0800 Subject: [PATCH 17/20] updata enter-leave show --- components/enter-animation/demo/enter-leave.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/enter-animation/demo/enter-leave.md b/components/enter-animation/demo/enter-leave.md index c68392146b..f28539388e 100644 --- a/components/enter-animation/demo/enter-leave.md +++ b/components/enter-animation/demo/enter-leave.md @@ -27,12 +27,12 @@ var Test = React.createClass({ console.log('leave'); } }, - bool:true, + show:true, } }, onClick() { this.setState({ - bool:!this.state.bool, + show:!this.state.show, }) }, @@ -43,7 +43,7 @@ var Test = React.createClass({
    - {this.state.bool ?
    + {this.state.show ?
    From b4a2fc35243a71d8544de1359c4691a210de2043 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 11 Sep 2015 14:57:32 +0800 Subject: [PATCH 18/20] Add instant, improve site speed --- components/iconfont/index.md | 1 + scripts/demo.js | 4 ++-- site/templates/aside.html | 4 +++- site/templates/layout.html | 10 ++++++++++ static/script.js | 3 +-- 5 files changed, 17 insertions(+), 5 deletions(-) diff --git a/components/iconfont/index.md b/components/iconfont/index.md index a348d4851a..83b570b470 100644 --- a/components/iconfont/index.md +++ b/components/iconfont/index.md @@ -3,6 +3,7 @@ - category: Components - chinese: 字体图标 - type: 基本 +- noinstant: true --- diff --git a/scripts/demo.js b/scripts/demo.js index 11528b31a4..ca91d6f079 100644 --- a/scripts/demo.js +++ b/scripts/demo.js @@ -6,8 +6,8 @@ var antd = require('antd'); var $ = require('jquery'); var React = require('react'); -$(function () { -// auto complete for components +InstantClickChangeFns.push(function () { + // auto complete for components var Select = antd.Select; var Option = Select.Option; // 获取搜索数据 diff --git a/site/templates/aside.html b/site/templates/aside.html index 01fbc9527a..6595ce493d 100644 --- a/site/templates/aside.html +++ b/site/templates/aside.html @@ -20,7 +20,9 @@
  • {{item.name}}
    • {%- else %}
  • - + {{item.title}} {{item.meta.chinese}} diff --git a/site/templates/layout.html b/site/templates/layout.html index 0ebd53b9a3..8c8ffd95b6 100644 --- a/site/templates/layout.html +++ b/site/templates/layout.html @@ -36,6 +36,7 @@ + diff --git a/static/script.js b/static/script.js index f8743e5bcb..696e997c40 100644 --- a/static/script.js +++ b/static/script.js @@ -1,4 +1,4 @@ -$(function() { +InstantClickChangeFns.push(function() { $('.component-demos .icon-all').on('click', function() { if ($(this).hasClass('expand')) { $(this).removeClass('expand'); @@ -142,7 +142,6 @@ $(function() { list.css({"display":"block","margin-top":-list.height()}); list.animate({marginTop:0},400,"easeInOutCirc") } - //parent.find("ul").slideToggle(300); }); } }; From b4b3198ad309deace21fe9f86785fb913ed4081e Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 11 Sep 2015 15:01:14 +0800 Subject: [PATCH 19/20] update CHANGELOG --- CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7e87bd094f..c45efbbdd3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -58,6 +58,11 @@ * 修改 Radio.Group 容器的盒模型属性为 inline-block 。 +### Enter Animation + +* 大幅度的重构，全新 API 的设计。 +* 支持和 react-router 结合使用。 + ### 其他 * 新增 [timeline](http://ant.design/components/timeline) 和 [badge](http://ant.design/components/badge) 组件。 From 7830718358f9ed735d98e676efdba66400b710d7 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 11 Sep 2015 15:36:53 +0800 Subject: [PATCH 20/20] some noinstant link --- site/templates/layout.html | 2 +- spec/page-transition.md | 1 + static/motionDemo.js | 111 ------------------------------------- 3 files changed, 2 insertions(+), 112 deletions(-) delete mode 100644 static/motionDemo.js diff --git a/site/templates/layout.html b/site/templates/layout.html index 8c8ffd95b6..a30c1024b0 100644 --- a/site/templates/layout.html +++ b/site/templates/layout.html @@ -91,7 +91,7 @@
    • - 首页 + 首页
    • 设计 diff --git a/spec/page-transition.md b/spec/page-transition.md index 4a52441dca..aa1bb1de99 100644 --- a/spec/page-transition.md +++ b/spec/page-transition.md @@ -2,6 +2,7 @@ - category: 动画 - order: 1 +- noinstant: true --- diff --git a/static/motionDemo.js b/static/motionDemo.js deleted file mode 100644 index 950f51e9cd..0000000000 --- a/static/motionDemo.js +++ /dev/null @@ -1,111 +0,0 @@ -/** - * Created by jljsj on 15/6/30. - */ -$(function (){ - var animBtnDome={ - animStr:'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', - init:function() { - var self=this; - self.body=$("body"); - self.btn=$(".ant-btn-ripple"); - //$(".ant-btn-lq").bind("click",function (le){ - // le.stopPropagation(); - //}); - - //涟漪效果 - self.btn.bind("mousedown",function (e){ - //console.log(e) - //var _x= e.offsetX,_y= e.offsetY; - var __x=$(this).offset().left,__y=$(this).offset().top, - _x= e.pageX-__x,_y= e.pageY-__y; - var lq=$("").prependTo(this); - var _w=this.offsetWidth,_h=this.offsetHeight; - lq.removeAttr("style").css({width:_w,height:_w,"border-radius":_w/2,left:_x-_w/2,top:_y-_w/2}); - if($(this).attr("class").indexOf("ant-btn-primary")>=0||$(this).attr("class").indexOf("ant-btn-ghost")>=0){ - lq.css("background-color","#fff"); - }else{ - lq.css("background-color","#999"); - } - var s=0; - //if(_h>=_w){ - // s=_y/_h*2<1?2-_y/_h*2:_y/_h*2; - //} - - var _sx=_x/_w* 2,_sy=_y/_h*2; - if(_sx>1&&_sy>1){ - s=_sx>_sy?_sx:_sy; - }else if(_sx>1||_sy>1){ - _sx=_sx<1?2-_sx:_sx; - _sy=_sy<1?2-_sy:_sy; - s=_sx>_sy?_sx:_sy; - }else { - s=2-_sx>2-_sy?2-_sx:2-_sy; - } - s=s+.3; - lq.css("transform","scale("+s+")") - - }); - function mousee_up(e){ - var lq=$(this).find(".ant-btn-lq"); - lq.delay(300).animate({opacity:0},300,function (){ - lq.remove(); - }) - } - self.btn.bind("mouseout",mousee_up); - self.btn.bind("mouseup",mousee_up); - - //加载按钮 - self.loadBtn=$(".ant-btn-load"); - self.loadBtn.bind("click",function (e){ - var m=$(this); - m.find("text").css({"opacity":"0","transform": "scale(2)"}); - m.find("span").css({"opacity":1,"transform": "scale(1)"}); - setTimeout(function (){ - m.find("text").removeAttr("style"); - m.find("span").removeAttr("style") - },4000) - }); - - //替换 - function reqClass(m,_class,call){ - if(m.attr("class").indexOf(_class+"-open")>=0){ - m.removeClass(_class+"-open").addClass(_class+"-close").one(self.animStr,function (){ - m.removeClass(_class+"-close"); - if(typeof call=="function"){ - call() - } - }) - }else{ - m.addClass(_class+"-open"); - } - } - - //icon的下拉演示 - self.listTip=$(".ant-btn-listtip"); - self.listTip.bind("click",function (e){ - var m=$(this); - var tip=$("#"+m.attr("data-id")); - reqClass(tip,"scale"); - - tip.css({left: m.position().left-tip.width()+ m.outerWidth()-2,top: m.position().top+m.outerHeight()+12}) - }); - - //dropdown演示的事件 - self.dropdown=$(".ant-dropdown-wrap"); - self.dropdown.find(".ant-btn-menu").bind("click",function (e){ - var m=$(this),p= m.parent(),d= p.find(".ant-dropdown"), - con= d.find(".ant-dropdown-con"),str="margin-top"; - d.css({"display":"block","margin-top":2}); - reqClass(con,str,function (){ - if(con.attr("class").indexOf('margin-top')<0){ - d.css({"display":"none"}) - } - - }); - - }) - } - }; - animBtnDome.init() - -}); \ No newline at end of file