From bf1d703274af0e3c2b7141b73c6d9bdbe43188d4 Mon Sep 17 00:00:00 2001 From: jljsj Date: Mon, 19 Oct 2015 15:36:32 +0800 Subject: [PATCH 01/13] queue-anim demo --- components/queue-anim/demo/simple.md | 22 +++ components/queue-anim/index.jsx | 10 ++ components/queue-anim/index.md | 202 +++++++++++++++++++++++++++ index.js | 1 + package.json | 3 +- 5 files changed, 237 insertions(+), 1 deletion(-) create mode 100644 components/queue-anim/demo/simple.md create mode 100644 components/queue-anim/index.jsx create mode 100644 components/queue-anim/index.md diff --git a/components/queue-anim/demo/simple.md b/components/queue-anim/demo/simple.md new file mode 100644 index 0000000000..44c81d0b3d --- /dev/null +++ b/components/queue-anim/demo/simple.md @@ -0,0 +1,22 @@ +# 默认 + +- order: 0 + +最简单的进场例子。 + +--- + +````jsx +var QueueAnim = antd.QueueAnim; +console.log(
dd
) +React.render( + +
依次进场
+
依次进场
+
依次进场
+
依次进场
+
依次进场
+ +, document.getElementById('components-queue-anim-demo-simple')); +```` + diff --git a/components/queue-anim/index.jsx b/components/queue-anim/index.jsx new file mode 100644 index 0000000000..7d9e134148 --- /dev/null +++ b/components/queue-anim/index.jsx @@ -0,0 +1,10 @@ +import React from 'react'; +import QueueAnim from 'rc-queue-anim'; + +class AntQueueAnim extends React.Component { + render() { + return ; + } +} +export default AntQueueAnim; + diff --git a/components/queue-anim/index.md b/components/queue-anim/index.md new file mode 100644 index 0000000000..8d8b6e5124 --- /dev/null +++ b/components/queue-anim/index.md @@ -0,0 +1,202 @@ +# QueueAnim + +- category: Components +- chinese: 进出场动画 + + +--- + +通过简单的配置对一组元素添加串行的进场动画效果。 + +## 何时使用 + +- 从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。 + +- 小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，使页面转场更加流畅和舒适，提高整体视觉效果和产品的质感。 + + +## API + +元素依次进场。 + +```html + +
依次进场
+
依次进场
+
依次进场
+
依次进场
+ +``` +### API + +> 每个子标签如需要动画，必需带key，如果没key将不执行动画; + +|参数 |类型 |默认 |详细 | +|------------|----------------|---------|----------------| +| type | string / array | `right` | 动画内置参数,
`left` `right` `top` `bottom` `scale` `scaleFrom` `scaleX` `scaleY`| +| 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 | 30 | 每个动画的间隔时间,以毫秒为单位 | +| leaveReverse | boolean | false | 出场时是否倒放,从最后一个 dom 开始往上播放 | +| ease | string / array | `easeOutQuart` | 动画的缓动函数,[查看详细](http://julian.com/research/velocity/#easing) | +| component | string | `div` | QueueAnim 替换的标签名 | + +> 当以上数据为Array时，`['left', 'top']` 第一个为 `enter` 数据, 第二个为 `leave` 数据; + + + diff --git a/index.js b/index.js index e4491c35f9..83a392dff0 100644 --- a/index.js +++ b/index.js @@ -34,6 +34,7 @@ const antd = { message: require('./components/message'), Slider: require('./components/slider'), EnterAnimation: require('./components/enter-animation'), + QueueAnim: require('./components/queue-anim'), Radio: require('./components/radio'), Notification: require('./components/notification'), Alert: require('./components/alert'), diff --git a/package.json b/package.json index cf51b62a27..a56de5db30 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "dependencies": { "css-animation": "~1.1.0", "enter-animation": "~0.5.0", + "rc-queue-anim": "~0.9.0", "gregorian-calendar": "~3.0.0", "gregorian-calendar-format": "~3.0.1", "object-assign": "~4.0.1", @@ -87,7 +88,7 @@ "lodash": "^3.10.0", "nico-jsx": "~0.5.8", "precommit-hook": "^1.0.7", - "react": "~0.13.0", + "react": "~0.14.0", "react-router": "1.0.0-rc1", "webpack": "^1.10.1", "webpack-dev-middleware": "^1.2.0" From 0ae67d96d83d9a63062a6fccf9212797a5c6011d Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 19 Oct 2015 15:58:18 +0800 Subject: [PATCH 02/13] use React for react-dom temporarily, wait 0.14 support, ref #243 --- webpack.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/webpack.config.js b/webpack.config.js index 335eb3e4c7..293ac744bc 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -29,6 +29,7 @@ module.exports = { commonjs: 'react', amd: 'react' }, + 'react-dom': 'React', 'antd':'antd', 'jquery': { root: 'jQuery', From ca595c68f5e205bc7153e8a674bc04cc2c25ac07 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 19 Oct 2015 16:20:30 +0800 Subject: [PATCH 03/13] deprecate EnterAnimation --- index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/index.js b/index.js index 83a392dff0..1c5ec2af0d 100644 --- a/index.js +++ b/index.js @@ -49,6 +49,9 @@ const antd = { Icon: require('./components/iconfont') }; +// deprecate +antd.EnterAnimation.prototype.render = require('util-deprecate')(antd.EnterAnimation.prototype.render, 'antd.EnterAnimation is deprecated, use antd.QueueAnim instead: http://ant.design/components/queue-anim'); + module.exports = antd; antd.version = require('./package.json').version; From e5bed684ebd0c4be7c2e0e5a936efe49909f1b28 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 19 Oct 2015 16:21:26 +0800 Subject: [PATCH 04/13] Remove enter-animation document --- components/enter-animation/index.md | 252 ---------------------------- 1 file changed, 252 deletions(-) delete mode 100644 components/enter-animation/index.md diff --git a/components/enter-animation/index.md b/components/enter-animation/index.md deleted file mode 100644 index d28f23290b..0000000000 --- a/components/enter-animation/index.md +++ /dev/null @@ -1,252 +0,0 @@ -# EnterAnimation - -- category: Components -- chinese: 进场动画 - - ---- - -通过简单的配置对一组元素添加串行的进场动画效果。 - -## 何时使用 - -- 从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。 - -- 小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，使页面转场更加流畅和舒适，提高整体视觉效果和产品的质感。 - - -## API - -元素依次进场。 - -```html - -
-
依次进场
-
依次进场
-
依次进场
-
依次进场
-
- -``` - -如子节点有 `enter-data` 值，则只执行有 `enter-data` 的节点的动画，相反所有子节点上都没有 `enter-data` 值，则执行遍历 dom 下一级节点来执行动画。 - -```html - -
-
-
- 依次进场 -
-
-
依次进场
-
依次进场，并修改动画效果
-
没有动画
-
- -``` - -### - -|参数 |类型 |默认值 |详细 | -|-----------------|-------|-------------|----------------------------------------------------| -|enter|object| `{type:'right'}` |管理进场数据| -|leave|object| null |管理当前元素出场的数据, null 时继承 enter 里的所有标签的值 | -|component|string| `div` | EnterAnimation 替换的标签名| - -### enter = {} | leave = {} - -|参数 |类型 |默认值 |详细 | -|-----------------|-------|-------------|----------------------------------------------------| -|type |string |`right` |内置动画样式：
`alpha` `left` `right` `top` `bottom` `scale` `scaleBig` `scaleX` `scaleY` | -|style |object / string |null |同上， style 的样式动画, `type` 有值，此项无效。
如 `{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 |整个区块的延时，以秒为单位| -|reverse |boolean|false |是否倒放,从最后一个 dom 开始往上播放| -|interval |number |0.1 |递增延时值，以秒为单位| -|callback |function|null |动画结束回调| - -### 一级标签key： - -|参数 |类型 |详细 | -|-----------------|-------|----------------------------------------------------| -|key|string|必需，控制进出场；| - -### 子标签 - -|参数 |类型 |默认值 |详细 | -|-----------------|-------|-----------|----------------------------------------------------| -|enter-data |object | `{type:'right'}` |子标签进场参数| -|leave-data |object | `enter-data` |子标签出场参数| - - -#### enter-data = {} | leave-data = {} - -|参数 |类型 |默认值 |详细 | -|-----------------|-----------------|----------------|----------------------------------------------------| -|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` 及更早的版本将没有进场效果。 - - From ba34a49f790e2b9ea21bd3445ede524b75b23575 Mon Sep 17 00:00:00 2001 From: jljsj Date: Wed, 21 Oct 2015 17:53:38 +0800 Subject: [PATCH 05/13] update queue-anim demo --- components/queue-anim/demo/basic.md | 64 ++++++++++ components/queue-anim/demo/change.md | 73 +++++++++++ components/queue-anim/demo/enter-leave.md | 60 +++++++++ components/queue-anim/demo/form.md | 86 +++++++++++++ components/queue-anim/demo/page.md | 83 ++++++++++++ components/queue-anim/demo/router.md | 147 ++++++++++++++++++++++ components/queue-anim/demo/simple.md | 4 +- components/queue-anim/demo/style.md | 64 ++++++++++ components/queue-anim/index.jsx | 1 + components/queue-anim/index.md | 5 +- package.json | 2 +- 11 files changed, 583 insertions(+), 6 deletions(-) create mode 100644 components/queue-anim/demo/basic.md create mode 100644 components/queue-anim/demo/change.md create mode 100644 components/queue-anim/demo/enter-leave.md create mode 100644 components/queue-anim/demo/form.md create mode 100644 components/queue-anim/demo/page.md create mode 100644 components/queue-anim/demo/router.md create mode 100644 components/queue-anim/demo/style.md diff --git a/components/queue-anim/demo/basic.md b/components/queue-anim/demo/basic.md new file mode 100644 index 0000000000..a3a9c53715 --- /dev/null +++ b/components/queue-anim/demo/basic.md @@ -0,0 +1,64 @@ +# 进场和离场 + +- order: 1 + +自动。 + +--- + +````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} + +
+ ); + } +}); + +React.render( +, document.getElementById('components-queue-anim-demo-basic')); +```` + + diff --git a/components/queue-anim/demo/change.md b/components/queue-anim/demo/change.md new file mode 100644 index 0000000000..628cbc0388 --- /dev/null +++ b/components/queue-anim/demo/change.md @@ -0,0 +1,73 @@ +# 添加与删除 + +- order: 5 + +场景里有增加或删除信息的一个动画。 + +--- + +````jsx +var QueueAnim = antd.QueueAnim; +var Button = antd.Button; +var Test = React.createClass({ + getInitialState() { + return { + show: true, + items: [
  • ,
  • ,
  • ], + } + }, + onClick() { + this.setState({ + show: !this.state.show, + }) + }, + onAdd() { + var items = this.state.items; + items.push(
  • ); + this.setState({ + show: true, + items: items, + }) + }, + onRemove() { + var items = this.state.items; + items.splice(items.length-1, 1); + this.setState({ + show: true, + items: items, + }) + }, + render() { + return ( +
    +
    + + + +
    +
    +
    +
    +
    + + {this.state.show ? this.state.items: null} + +
    +
    +
    +
    + ); + } +}); + +React.render( +, document.getElementById('components-queue-anim-demo-change')); +```` + + diff --git a/components/queue-anim/demo/enter-leave.md b/components/queue-anim/demo/enter-leave.md new file mode 100644 index 0000000000..81f59eb291 --- /dev/null +++ b/components/queue-anim/demo/enter-leave.md @@ -0,0 +1,60 @@ +# 配置进出场的样式 + +- order: 2 + +配置进出场动画样式。 + + +--- + +````jsx +var QueueAnim = antd.QueueAnim; +var Button = antd.Button; + +var Test = React.createClass({ + onClick() { + this.setState({ + show: !this.state.show, + }) + }, + render() { + return ( +
    +
    + +
    + + {this.state.show ? [
    +
      +
    • +
    • +
    • +
    +
    , +
    +
    +
    +
      +
    • +
    • +
    • +
    +
    +
    ]: null} +     +
    + ); + } +}); + +React.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 new file mode 100644 index 0000000000..a93c039c20 --- /dev/null +++ b/components/queue-anim/demo/form.md @@ -0,0 +1,86 @@ +# 表单动画进出场 + +- order: 4 + +表单组合的进场与出场动画。 + +--- + +````jsx +var QueueAnim = antd.QueueAnim; +var Select = antd.Select; +var Option = Select.Option; +var Checkbox = antd.Checkbox; +var Radio = antd.Radio; +var RadioGroup = antd.Radio.Group; +var Button = antd.Button; + +var Test = React.createClass({ + getInitialState() { + return { + show: true, + } + }, + onClick() { + this.setState({ + show: !this.state.show, + }) + }, + render() { + return ( +
    +
    + +
    + + {this.state.show ? [
    + +
    +

    大眼萌 minion

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

    随便写点什么

    +
    +
    , +
    +
    + +
    +
    , +
    +
    + +
    +
    ]: null} +     +
    + ) + } +}); + +React.render( +, document.getElementById('components-queue-anim-demo-form')); +```` + diff --git a/components/queue-anim/demo/page.md b/components/queue-anim/demo/page.md new file mode 100644 index 0000000000..c2d5f7831c --- /dev/null +++ b/components/queue-anim/demo/page.md @@ -0,0 +1,83 @@ +# 页面的进场和离场 + +- order: 6 + +页面的进场和离场。 + +--- + +````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 ? [
    +
    + + logo +
    + +
  • +
  • +
  • +
  • +
  • +     +
    , + +
    我是标题
    +
    + +
  • +
  • +
  • +     +
    +
    我是标题
    +
    + +
    + +
  • +
  • +
  • +
  • +
  • +     +     +
    +     , +
    ] : null} +     +
    + ); + } +}); + +React.render( +, document.getElementById('components-queue-anim-demo-page')); +```` + diff --git a/components/queue-anim/demo/router.md b/components/queue-anim/demo/router.md new file mode 100644 index 0000000000..4ff8258d0c --- /dev/null +++ b/components/queue-anim/demo/router.md @@ -0,0 +1,147 @@ +# Router 默认进出场 + +- order: 7 + +router 组合的进场与出场动画。 + +--- + +````jsx +var ReactRouter = require('react-router'); +var Router = ReactRouter.Router; +var Route = ReactRouter.Route; +var Link = ReactRouter.Link; +var QueueAnim = antd.QueueAnim; +var Menu = antd.Menu; + +var App = React.createClass({ + render() { + var key = this.props.location.pathname; + 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 ( +
    + +
    + +
  • +
  • +
  • +     +
    +
    + +
    + +
  • +
  • +
  • +     +     +
    +     +
    + ); + } +}); +var Page2 = React.createClass({ + render() { + return ( +
    +
    +
    + +
    + +
  • +
  • +
  • +
  • +
  • +     +     +
    +
    +
    + ); + } +}); +React.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 44c81d0b3d..f278ecea95 100644 --- a/components/queue-anim/demo/simple.md +++ b/components/queue-anim/demo/simple.md @@ -8,9 +8,8 @@ ````jsx var QueueAnim = antd.QueueAnim; -console.log(
    dd
    ) React.render( - +
    依次进场
    依次进场
    依次进场
    @@ -19,4 +18,3 @@ React.render(     , document.getElementById('components-queue-anim-demo-simple')); ```` - diff --git a/components/queue-anim/demo/style.md b/components/queue-anim/demo/style.md new file mode 100644 index 0000000000..ffaf5e89ae --- /dev/null +++ b/components/queue-anim/demo/style.md @@ -0,0 +1,64 @@ +# 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} +     +
    + ) + } +}); + +React.render( +, document.getElementById('components-queue-anim-demo-style')); +```` + + diff --git a/components/queue-anim/index.jsx b/components/queue-anim/index.jsx index 7d9e134148..0c5825ed7c 100644 --- a/components/queue-anim/index.jsx +++ b/components/queue-anim/index.jsx @@ -8,3 +8,4 @@ class AntQueueAnim extends React.Component { } export default AntQueueAnim; + diff --git a/components/queue-anim/index.md b/components/queue-anim/index.md index 8d8b6e5124..08176f470b 100644 --- a/components/queue-anim/index.md +++ b/components/queue-anim/index.md @@ -33,13 +33,14 @@ |参数 |类型 |默认 |详细 | |------------|----------------|---------|----------------| -| type | string / array | `right` | 动画内置参数,
    `left` `right` `top` `bottom` `scale` `scaleFrom` `scaleX` `scaleY`| -| animConfig | object / array | null | 配置动画参数, 如 `{opacity:[1, 0],translateY:[0, -30]}` 具体参考 [velocity](http://julian.com/research/velocity) 的写法| +| type | string / array | `right` | 动画内置参数
    `left` `right` `top` `bottom` `scale` `scaleBig` `scaleX` `scaleY`| +| 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 | 30 | 每个动画的间隔时间,以毫秒为单位 | | leaveReverse | boolean | false | 出场时是否倒放,从最后一个 dom 开始往上播放 | | ease | string / array | `easeOutQuart` | 动画的缓动函数,[查看详细](http://julian.com/research/velocity/#easing) | +| animatingClassName | array | `['queue-anim-entering', 'queue-anim-leaving']` | 每个进出场动画开始时的默认样式 | | component | string | `div` | QueueAnim 替换的标签名 | > 当以上数据为Array时，`['left', 'top']` 第一个为 `enter` 数据, 第二个为 `leave` 数据; diff --git a/package.json b/package.json index a56de5db30..35c8f303b6 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "dependencies": { "css-animation": "~1.1.0", "enter-animation": "~0.5.0", - "rc-queue-anim": "~0.9.0", + "rc-queue-anim": "~0.10.4", "gregorian-calendar": "~3.0.0", "gregorian-calendar-format": "~3.0.1", "object-assign": "~4.0.1", From dc2c720cec646877fcbf2ce05b43bb72edc76618 Mon Sep 17 00:00:00 2001 From: jljsj Date: Wed, 21 Oct 2015 17:56:42 +0800 Subject: [PATCH 06/13] update queue-anim enter-leave state.show --- components/queue-anim/demo/enter-leave.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/components/queue-anim/demo/enter-leave.md b/components/queue-anim/demo/enter-leave.md index 81f59eb291..3be10821f1 100644 --- a/components/queue-anim/demo/enter-leave.md +++ b/components/queue-anim/demo/enter-leave.md @@ -12,6 +12,11 @@ var QueueAnim = antd.QueueAnim; var Button = antd.Button; var Test = React.createClass({ + getInitialState() { + return { + show: true, + } + }, onClick() { this.setState({ show: !this.state.show, From d2cf91d83789dd63216abcc6be97d0170c12c580 Mon Sep 17 00:00:00 2001 From: jljsj Date: Wed, 21 Oct 2015 18:15:17 +0800 Subject: [PATCH 07/13] update queue-anim interval --- components/queue-anim/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/queue-anim/index.md b/components/queue-anim/index.md index 08176f470b..c45fce5cbc 100644 --- a/components/queue-anim/index.md +++ b/components/queue-anim/index.md @@ -37,7 +37,7 @@ | 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 | 30 | 每个动画的间隔时间,以毫秒为单位 | +| 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']` | 每个进出场动画开始时的默认样式 | From 806dfbfd1ee3d44b8aeaacb5a4b2afe3b703a3e4 Mon Sep 17 00:00:00 2001 From: jljsj Date: Fri, 23 Oct 2015 12:25:07 +0800 Subject: [PATCH 08/13] update page-transition link --- spec/page-transition.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spec/page-transition.md b/spec/page-transition.md index 6e09b1df74..6081466f32 100644 --- a/spec/page-transition.md +++ b/spec/page-transition.md @@ -62,4 +62,4 @@ -> 参考我们的进场组件案例。查看[进场动画组件](/components/enter-animation/) +> 参考我们的进场组件案例。查看[进场动画组件(QueueAnim)](/components/queue-anim/) From ac87334179cd53c1149fb7b407de74c04e1378b4 Mon Sep 17 00:00:00 2001 From: jljsj Date: Fri, 23 Oct 2015 14:53:57 +0800 Subject: [PATCH 09/13] update queue-anim demo ReactDOM --- components/queue-anim/demo/basic.md | 2 +- components/queue-anim/demo/change.md | 2 +- components/queue-anim/demo/enter-leave.md | 2 +- components/queue-anim/demo/form.md | 2 +- components/queue-anim/demo/page.md | 2 +- components/queue-anim/demo/router.md | 2 +- components/queue-anim/demo/simple.md | 2 +- components/queue-anim/demo/style.md | 4 ++-- package.json | 2 +- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/components/queue-anim/demo/basic.md b/components/queue-anim/demo/basic.md index a3a9c53715..6b1869d170 100644 --- a/components/queue-anim/demo/basic.md +++ b/components/queue-anim/demo/basic.md @@ -51,7 +51,7 @@ var Test = React.createClass({ } }); -React.render( +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 628cbc0388..d8c0e9f0fd 100644 --- a/components/queue-anim/demo/change.md +++ b/components/queue-anim/demo/change.md @@ -60,7 +60,7 @@ var Test = React.createClass({ } }); -React.render( +ReactDOM.render( , document.getElementById('components-queue-anim-demo-change')); ```` diff --git a/components/queue-anim/demo/enter-leave.md b/components/queue-anim/demo/enter-leave.md index 3be10821f1..f5f9366b01 100644 --- a/components/queue-anim/demo/enter-leave.md +++ b/components/queue-anim/demo/enter-leave.md @@ -52,7 +52,7 @@ var Test = React.createClass({ } }); -React.render( +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 a93c039c20..8b4b103898 100644 --- a/components/queue-anim/demo/form.md +++ b/components/queue-anim/demo/form.md @@ -80,7 +80,7 @@ var Test = React.createClass({ } }); -React.render( +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 c2d5f7831c..78c2384644 100644 --- a/components/queue-anim/demo/page.md +++ b/components/queue-anim/demo/page.md @@ -71,7 +71,7 @@ var Test = React.createClass({ } }); -React.render( +ReactDOM.render( , document.getElementById('components-queue-anim-demo-page')); ```` diff --git a/components/enter-animation/demo/enter-data.md b/components/enter-animation/demo/enter-data.md deleted file mode 100644 index 1472602a01..0000000000 --- a/components/enter-animation/demo/enter-data.md +++ /dev/null @@ -1,77 +0,0 @@ -# 指定节点动画进出场 - -- order: 3 - -通过加上 `enter-data` 属性来指定需要动画进场的元素，并且可以定义每个元素的动画效果。 - - ---- - -````jsx -var EnterAnimation = antd.EnterAnimation; -var Button = antd.Button; - -var Test = React.createClass({ - getInitialState() { - return { - enter: { - type: 'right', - interval: .1, - }, - leave: { - type:'left', - interval: 0.03 - }, - show: true - } - }, - onClick() { - this.setState({ - show: !this.state.show - }) - }, - render() { - return ( -
    -
    - -
    - - {this.state.show ?
    -
    -
    -
      -
    • -
    • -
    • -
    -
    -
    -
    -
    -
      -
    • -
    • -
    • -
    -
    -
    -
    -
    : null} -     -
    - ) - } -}); - -ReactDOM.render( -, document.getElementById('components-enter-animation-demo-enter-data')); -```` - - diff --git a/components/enter-animation/demo/enter-leave.md b/components/enter-animation/demo/enter-leave.md deleted file mode 100644 index 56121e53e2..0000000000 --- a/components/enter-animation/demo/enter-leave.md +++ /dev/null @@ -1,83 +0,0 @@ -# 配置进出场的样式 - -- order: 2 - -配置进出场动画样式。 - - ---- - -````jsx -var EnterAnimation = antd.EnterAnimation; -var Button = antd.Button; - -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'); - } - }, - show:true, - } - }, - onClick() { - this.setState({ - show:!this.state.show, - - }) - }, - render() { - return ( -
    -
    - -
    - - {this.state.show ? -
    -
    -
      -
    • -
    • -
    • -
    -
    -
    -
    -
    -
      -
    • -
    • -
    • -
    -
    -
    -
    : null} -     -
    - ); - } -}); - -ReactDOM.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 deleted file mode 100644 index e033d1faf6..0000000000 --- a/components/enter-animation/demo/form.md +++ /dev/null @@ -1,102 +0,0 @@ -# 表单动画进出场 - -- order: 6 - -表单组合的进场与出场动画。 - ---- - -````jsx -var EnterAnimation = antd.EnterAnimation; -var Select = antd.Select; -var Option = Select.Option; -var Checkbox = antd.Checkbox; -var Radio = antd.Radio; -var RadioGroup = antd.Radio.Group; -var Button = antd.Button; - -var Test = React.createClass({ - getInitialState() { - return { - enter: { - type: 'right', - callback: null, - interval: 0.1 - }, - leave: { - type: 'left', - reverse: true, - interval: 0.05, - ease:'cubic-bezier(0.55, 0.085, 0.68, 0.53)', - callback: ()=> { - console.log('出场结束') - } - }, - show: true - } - }, - onClick() { - this.setState({ - show: !this.state.show - }) - }, - render() { - return ( -
    -
    - -
    - - {this.state.show ?
    -
    - -
    -

    大眼萌 minion

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

    随便写点什么

    -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    : null} -     -
    - ) - } -}); - -ReactDOM.render( -, document.getElementById('components-enter-animation-demo-form')); -```` - diff --git a/components/enter-animation/demo/page.md b/components/enter-animation/demo/page.md deleted file mode 100644 index 2cfcd03c84..0000000000 --- a/components/enter-animation/demo/page.md +++ /dev/null @@ -1,96 +0,0 @@ -# 页面的进场和离场 - -- order: 5 - -页面的进场和离场。 - ---- - -````jsx -var EnterAnimation = antd.EnterAnimation; -var Button = antd.Button; - -var Test = React.createClass({ - getInitialState() { - return { - show: true, - enter:{ - type:'right', - ease:'cubic-bezier(0.19, 1, 0.22, 1)' - }, - leave:{ - type:'left', - ease:'cubic-bezier(0.455, 0.03, 0.515, 0.955)', - reverse:true, - interval:0.05 - } - } - }, - onClick() { - this.setState({ - show: !this.state.show - }) - }, - render() { - return ( -
    -
    - -
    - - {this.state.show ?
    -
    -
    - - logo -
    -
      -
    • -
    • -
    • -
    • -
    • -
    -
    -
    -
    我是标题
    -
    -
      -
    • -
    • -
    • -
    -
    -
    我是标题
    -
    -
    -
    -
      -
    • -
    • -
    • -
    • -
    • -
    -
    -
    -
    -
    -
    : null} -     -
    - ); - } -}); - -ReactDOM.render( -, document.getElementById('components-enter-animation-demo-page')); -```` - - diff --git a/components/enter-animation/demo/router.md b/components/enter-animation/demo/router.md deleted file mode 100644 index d62751ebc6..0000000000 --- a/components/enter-animation/demo/router.md +++ /dev/null @@ -1,99 +0,0 @@ -# Router 默认进出场 - -- order: 7 - -router 组合的进场与出场动画。 - ---- - -````jsx -var ReactRouter = require('react-router'); -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: {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() { - 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.

    -
    - ); - } -}); -ReactDOM.render(( - - - - - - -), document.getElementById('components-enter-animation-demo-router')); -```` - - diff --git a/components/enter-animation/demo/simple.md b/components/enter-animation/demo/simple.md deleted file mode 100644 index 43a150787c..0000000000 --- a/components/enter-animation/demo/simple.md +++ /dev/null @@ -1,27 +0,0 @@ -# 默认 - -- order: 0 - -最简单的进场例子。 - ---- - -````jsx -var EnterAnimation = antd.EnterAnimation; - -ReactDOM.render( - -
      -
    • 依次进场
      • -
    • 依次进场
      • -
    • 依次进场
      • -
    • 依次进场
      • -
    • 依次进场
      • -
    • 依次进场
      • -
    • 依次进场
      • -
    • 依次进场
      • -
    -     -, document.getElementById('components-enter-animation-demo-simple')); -```` - diff --git a/components/enter-animation/demo/style.md b/components/enter-animation/demo/style.md deleted file mode 100644 index 20382c508d..0000000000 --- a/components/enter-animation/demo/style.md +++ /dev/null @@ -1,79 +0,0 @@ -# style 自定义样式动画进出场 - -- order: 4 - -通过加上属性里的 `style` 来自定义 CSS 动画进出场。 - - ---- - -````jsx -var EnterAnimation = antd.EnterAnimation; -var Button = antd.Button; - -var Test = React.createClass({ - getInitialState() { - return { - enter: { - style: { - transform: "translateX(50px)", - opacity: 0 - }, - interval: .1, - }, - leave: { - interval: 0.03 - }, - show: true - } - }, - onClick() { - this.setState({ - show: !this.state.show - }) - }, - render() { - return ( -
    -
    - -
    - - {this.state.show ?
    -
    -
    -
      -
    • -
    • -
    • -
    -
    -
    -
    -
    -
      -
    • -
    • -
    • -
    -
    -
    -
    -
    : null} -     -
    - ) - } -}); - -ReactDOM.render( -, document.getElementById('components-enter-animation-demo-style')); -```` - - diff --git a/components/enter-animation/index.jsx b/components/enter-animation/index.jsx deleted file mode 100644 index fd4cf152c5..0000000000 --- a/components/enter-animation/index.jsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import EnterAnimation from 'enter-animation'; - -class AntEnterAnimation extends React.Component { - render() { - return ; - } -} - -AntEnterAnimation.to = EnterAnimation.to; -export default AntEnterAnimation; - diff --git a/index.js b/index.js index 4fbf3f9196..ae49da7b47 100644 --- a/index.js +++ b/index.js @@ -35,7 +35,6 @@ const antd = { Collapse: require('./components/collapse'), message: require('./components/message'), Slider: require('./components/slider'), - EnterAnimation: require('./components/enter-animation'), QueueAnim: require('./components/queue-anim'), Radio: require('./components/radio'), Notification: require('./components/notification'), diff --git a/package.json b/package.json index e4a50fd326..e85c75497d 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,6 @@ "license": "MIT", "dependencies": { "css-animation": "~1.1.0", - "enter-animation": "~0.5.0", "rc-queue-anim": "~0.10.5", "gregorian-calendar": "~3.0.0", "gregorian-calendar-format": "~3.0.1", From c4b09188727b1d53da3bdee5e3759b888d853ec6 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 23 Oct 2015 22:37:42 +0800 Subject: [PATCH 13/13] 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']` 第一个为进场动画属性, 第二个为离场属性。