From c4b09188727b1d53da3bdee5e3759b888d853ec6 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 23 Oct 2015 22:37:42 +0800 Subject: [PATCH] update queue-anim demos --- components/queue-anim/demo/basic.md | 45 ++++----- components/queue-anim/demo/change.md | 42 ++++----- components/queue-anim/demo/custom.md | 60 ++++++++++++ components/queue-anim/demo/enter-leave.md | 57 ++++++------ components/queue-anim/demo/form.md | 26 +++--- components/queue-anim/demo/page.md | 106 +++++++++++----------- components/queue-anim/demo/router.md | 101 +++++++++++---------- components/queue-anim/demo/simple.md | 24 ++++- components/queue-anim/demo/style.md | 64 ------------- components/queue-anim/index.jsx | 9 +- components/queue-anim/index.md | 13 ++- 11 files changed, 265 insertions(+), 282 deletions(-) create mode 100644 components/queue-anim/demo/custom.md delete mode 100644 components/queue-anim/demo/style.md diff --git a/components/queue-anim/demo/basic.md b/components/queue-anim/demo/basic.md index 6b1869d170..472cf8c408 100644 --- a/components/queue-anim/demo/basic.md +++ b/components/queue-anim/demo/basic.md @@ -2,7 +2,7 @@ - order: 1 -自动。 +同时支持进场和离场动画。 --- @@ -13,29 +13,30 @@ var Button = antd.Button; var Test = React.createClass({ getInitialState() { return { - show: true, - } + show: true + }; }, onClick() { this.setState({ - show: !this.state.show, - }) + show: !this.state.show + }); }, render() { return (
-
+

-

+

- {this.state.show ? [
-
    -
  • -
  • -
  • -
-
, -
+ {this.state.show ? [ +
+
    +
  • +
  • +
  • +
+
, +
    @@ -44,21 +45,13 @@ var Test = React.createClass({
-
] : null} +
+ ] : null}
); } }); -ReactDOM.render( -, document.getElementById('components-queue-anim-demo-basic')); +ReactDOM.render(, document.getElementById('components-queue-anim-demo-basic')); ```` - - diff --git a/components/queue-anim/demo/change.md b/components/queue-anim/demo/change.md index d8c0e9f0fd..84e2fa71cf 100644 --- a/components/queue-anim/demo/change.md +++ b/components/queue-anim/demo/change.md @@ -2,24 +2,29 @@ - order: 5 -场景里有增加或删除信息的一个动画。 +场景里有增加或删除条目时也会触发动画。 --- ````jsx var QueueAnim = antd.QueueAnim; var Button = antd.Button; + var Test = React.createClass({ getInitialState() { return { show: true, - items: [
  • ,
  • ,
  • ], - } + items: [ +
  • , +
  • , +
  • + ], + }; }, onClick() { this.setState({ show: !this.state.show, - }) + }); }, onAdd() { var items = this.state.items; @@ -27,29 +32,29 @@ var Test = React.createClass({ this.setState({ show: true, items: items, - }) + }); }, onRemove() { var items = this.state.items; - items.splice(items.length-1, 1); + items.splice(items.length - 1, 1); this.setState({ show: true, items: items, - }) + }); }, render() { return (
    -
    +

    - - -

    + + +

    -
    +
    - + {this.state.show ? this.state.items: null}
    @@ -60,14 +65,5 @@ var Test = React.createClass({ } }); -ReactDOM.render( -, document.getElementById('components-queue-anim-demo-change')); +ReactDOM.render(, document.getElementById('components-queue-anim-demo-change')); ```` - - diff --git a/components/queue-anim/demo/custom.md b/components/queue-anim/demo/custom.md new file mode 100644 index 0000000000..8aaa22c08e --- /dev/null +++ b/components/queue-anim/demo/custom.md @@ -0,0 +1,60 @@ +# 自定义动画进出场 + +- order: 3 + +通过 `animConfig` 来自定义动画进出场。 + +--- + +````jsx +var QueueAnim = antd.QueueAnim; +var Button = antd.Button; +var Test = React.createClass({ + getInitialState() { + return { + show: true, + } + }, + onClick() { + this.setState({ + show: !this.state.show, + }) + }, + render() { + return ( +
    +

    + +

    + + {this.state.show ? [ +
    +
      +
    • +
    • +
    • +
    +
    , +
    +
    +
    +
      +
    • +
    • +
    • +
    +
    +
    + ] : null} +     +
    + ) + } +}); + +ReactDOM.render(, document.getElementById('components-queue-anim-demo-custom')); +```` diff --git a/components/queue-anim/demo/enter-leave.md b/components/queue-anim/demo/enter-leave.md index f5f9366b01..f7c6747716 100644 --- a/components/queue-anim/demo/enter-leave.md +++ b/components/queue-anim/demo/enter-leave.md @@ -1,9 +1,8 @@ -# 配置进出场的样式 +# 进场和离场 - order: 2 -配置进出场动画样式。 - +通过把属性设置一个数组来分别表示进出场的效果，`type`、`animConfig`、`delay`、`duration`、`interval`、`ease` 等属性均支持配置为数组。 --- @@ -14,52 +13,48 @@ var Button = antd.Button; var Test = React.createClass({ getInitialState() { return { - show: true, - } + show: true + }; }, onClick() { this.setState({ - show: !this.state.show, - }) + show: !this.state.show + }); }, render() { return (
    -
    +

    -

    - - {this.state.show ? [
    -
      -
    • -
    • -
    • -
    -
    , -
    -
    -
    +

    + + {this.state.show ? [ +
    +
    , +
    +
    +
    +
      +
    • +
    • +
    • +
    +
    -
    ]: null} + ]: null}
    ); } }); -ReactDOM.render( -, document.getElementById('components-queue-anim-demo-enter-leave')); +ReactDOM.render(, document.getElementById('components-queue-anim-demo-enter-leave')); ```` - - diff --git a/components/queue-anim/demo/form.md b/components/queue-anim/demo/form.md index 8b4b103898..eff4a9d62c 100644 --- a/components/queue-anim/demo/form.md +++ b/components/queue-anim/demo/form.md @@ -18,22 +18,23 @@ var Button = antd.Button; var Test = React.createClass({ getInitialState() { return { - show: true, - } + show: true + }; }, onClick() { this.setState({ - show: !this.state.show, - }) + show: !this.state.show + }); }, render() { return (
    -
    +

    -

    - - {this.state.show ? [
    +

    + + {this.state.show ? [ +

    大眼萌 minion

    @@ -73,14 +74,13 @@ var Test = React.createClass({
    -
    ]: null} +
    + ] : null}
    - ) + ); } }); -ReactDOM.render( -, document.getElementById('components-queue-anim-demo-form')); +ReactDOM.render(, document.getElementById('components-queue-anim-demo-form')); ```` - diff --git a/components/queue-anim/demo/page.md b/components/queue-anim/demo/page.md index 78c2384644..e2537ebd66 100644 --- a/components/queue-anim/demo/page.md +++ b/components/queue-anim/demo/page.md @@ -1,8 +1,8 @@ -# 页面的进场和离场 +# 一个复杂些的例子 - order: 6 -页面的进场和离场。 +模拟一个完整的页面。 --- @@ -13,71 +13,67 @@ var Button = antd.Button; var Test = React.createClass({ getInitialState() { return { - show: true, - } + show: true + }; }, onClick() { this.setState({ - show: !this.state.show, - }) + show: !this.state.show + }); }, render() { return (
    -
    +

    -

    - - {this.state.show ? [
    -
    - - logo -
    - -
  • -
  • -
  • -
  • -
  • -     -
    , - -
    我是标题
    -
    - -
  • -
  • -
  • -     -
    -
    我是标题
    -
    - -
    - -
  • -
  • -
  • -
  • -
  • -     -     -
    -     , -
    ] : null} +

    + + {this.state.show ? [ +
    +
    + + logo +
    + +
  • +
  • +
  • +
  • +
  • +
    , + +
    我是标题
    +
    + +
  • +
  • +
  • +     +
    +
    我是标题
    +
    + +
    + +
  • +
  • +
  • +
  • +
  • +     +     +
    +     , + +
    +     + ] : null} +
    ); } }); -ReactDOM.render( -, document.getElementById('components-queue-anim-demo-page')); +ReactDOM.render(, document.getElementById('components-queue-anim-demo-page')); ```` - diff --git a/components/queue-anim/demo/router.md b/components/queue-anim/demo/router.md index 428fd69b76..723d7cf8d4 100644 --- a/components/queue-anim/demo/router.md +++ b/components/queue-anim/demo/router.md @@ -17,77 +17,79 @@ var Menu = antd.Menu; var App = React.createClass({ render() { var key = this.props.location.pathname; - var keys = key.replace('/','') ? [ key.replace('/','') ] : [ 'home' ]; + var keys = key.replace('/', '') ? [ key.replace('/', '') ] : [ 'home' ]; return (
    - + 首页 - + Page 1 - + Page 2 - + {React.cloneElement(this.props.children||, {key: key})}
    ); } }); + var Home = React.createClass({ render() { return ( -
    +
    -
    - -
  • -
  • -
  • +
    + +
  • +
  • +
  • -
    - -
  • -
  • -
  • +
    + +
  • +
  • +
  • -
    - -
  • -
  • -
  • +
    + +
  • +
  • +
  • ); } -}) +}); + var Page1 = React.createClass({ render() { return ( -
    +
    -
    - -
  • -
  • -
  • +
    + +
  • +
  • +
  • -
    - -
  • -
  • -
  • +
    + +
  • +
  • +
  • @@ -96,20 +98,22 @@ var Page1 = React.createClass({ ); } }); + var Page2 = React.createClass({ render() { return ( -
    -
    +
    +
    -
    - -
  • -
  • -
  • -
  • -
  • +
    + +
  • +
  • +
  • +
  • +
  • +
  • @@ -118,6 +122,7 @@ var Page2 = React.createClass({ ); } }); + ReactDOM.render(( @@ -128,20 +133,16 @@ ReactDOM.render(( ), document.getElementById('components-queue-anim-demo-router')); ```` - +```` diff --git a/components/queue-anim/demo/simple.md b/components/queue-anim/demo/simple.md index 72010c0b66..f87a5caeb9 100644 --- a/components/queue-anim/demo/simple.md +++ b/components/queue-anim/demo/simple.md @@ -8,13 +8,27 @@ ````jsx var QueueAnim = antd.QueueAnim; + ReactDOM.render( -
    依次进场
    -
    依次进场
    -
    依次进场
    -
    依次进场
    -
    依次进场
    +
    依次进场
    +
    依次进场
    +
    依次进场
    +
    依次进场
    +
    依次进场
    +
    依次进场
     , document.getElementById('components-queue-anim-demo-simple')); ```` + +````css +.code-box-demo > div { + overflow: hidden; +} + +.code-box-demo .buttons { + text-align: center; + margin: 0 auto; + margin-bottom: 20px; +} +```` diff --git a/components/queue-anim/demo/style.md b/components/queue-anim/demo/style.md deleted file mode 100644 index f7bef30221..0000000000 --- a/components/queue-anim/demo/style.md +++ /dev/null @@ -1,64 +0,0 @@ -# style 自定义样式动画进出场 - -- order: 3 - -通过加上属性里的 `style` 来自定义 CSS 动画进出场。 - - ---- - -````jsx -var QueueAnim = antd.QueueAnim; -var Button = antd.Button; -var Test = React.createClass({ - getInitialState() { - return { - show: true, - } - }, - onClick() { - this.setState({ - show: !this.state.show, - }) - }, - render() { - return ( -
    -
    - -
    - - {this.state.show ? [
    -
      -
    • -
    • -
    • -
    -
    , -
    -
    -
    -
      -
    • -
    • -
    • -
    -
    -
    ] : null} -     -
    - ) - } -}); - -ReactDOM.render( -, document.getElementById('components-queue-anim-demo-style')); -```` - - diff --git a/components/queue-anim/index.jsx b/components/queue-anim/index.jsx index 4bd6ad6511..d94d1c4ea3 100644 --- a/components/queue-anim/index.jsx +++ b/components/queue-anim/index.jsx @@ -1,10 +1,3 @@ -import React from 'react'; import QueueAnim from 'rc-queue-anim'; -class AntQueueAnim extends React.Component { - render() { - return ; - } -} - -export default AntQueueAnim; +export default QueueAnim; diff --git a/components/queue-anim/index.md b/components/queue-anim/index.md index c45fce5cbc..a3a800a180 100644 --- a/components/queue-anim/index.md +++ b/components/queue-anim/index.md @@ -3,7 +3,6 @@ - category: Components - chinese: 进出场动画 - --- 通过简单的配置对一组元素添加串行的进场动画效果。 @@ -14,6 +13,8 @@ - 小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，使页面转场更加流畅和舒适，提高整体视觉效果和产品的质感。 +- 特别适合首页和需要视觉展示效果的宣传页，以及单页应用的切换页面动效。 + ## API @@ -27,9 +28,8 @@
    依次进场
     ``` -### API -> 每个子标签如需要动画，必需带key，如果没key将不执行动画; +> 每个子标签必须带 key，如果未设置 key 将不执行动画。 |参数 |类型 |默认 |详细 | |------------|----------------|---------|----------------| @@ -37,14 +37,13 @@ | animConfig | object / array | null | 配置动画参数
    如 `{opacity:[1, 0],translateY:[0, -30]}` 具体参考 [velocity](http://julian.com/research/velocity) 的写法| | delay | number / array | 0 | 整个动画的延时,以毫秒为单位 | | duration | number / array | 500 | 每个动画的时间,以毫秒为单位 | -| interval | number / array | 100 | 每个动画的间隔时间,以毫秒为单位 | +| interval | number / array | 100 | 每个动画的间隔时间,以毫秒为单位 | | leaveReverse | boolean | false | 出场时是否倒放,从最后一个 dom 开始往上播放 | | ease | string / array | `easeOutQuart` | 动画的缓动函数,[查看详细](http://julian.com/research/velocity/#easing) | -| animatingClassName | array | `['queue-anim-entering', 'queue-anim-leaving']` | 每个进出场动画开始时的默认样式 | +| animatingClassName | array | `['queue-anim-entering', 'queue-anim-leaving']` | 进出场动画进行中的类名 | | component | string | `div` | QueueAnim 替换的标签名 | -> 当以上数据为Array时，`['left', 'top']` 第一个为 `enter` 数据, 第二个为 `leave` 数据; - +> 当以上数据类型为 Array 时，`['left', 'top']` 第一个为进场动画属性, 第二个为离场属性。