diff --git a/components/enter-animation/demo/basic.md b/components/enter-animation/demo/basic.md deleted file mode 100644 index 5186ad5bea..0000000000 --- a/components/enter-animation/demo/basic.md +++ /dev/null @@ -1,67 +0,0 @@ -# 进场和离场 - -- order: 1 - -自动。 - ---- - -````jsx -var EnterAnimation = antd.EnterAnimation; -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-enter-animation-demo-basic')); -```` - - 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/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/components/queue-anim/demo/basic.md b/components/queue-anim/demo/basic.md new file mode 100644 index 0000000000..472cf8c408 --- /dev/null +++ b/components/queue-anim/demo/basic.md @@ -0,0 +1,57 @@ +# 进场和离场 + +- 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} + +
+ ); + } +}); + +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 new file mode 100644 index 0000000000..84e2fa71cf --- /dev/null +++ b/components/queue-anim/demo/change.md @@ -0,0 +1,69 @@ +# 添加与删除 + +- 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} + +
    +
    +
    +
    + ); + } +}); + +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 new file mode 100644 index 0000000000..f7c6747716 --- /dev/null +++ b/components/queue-anim/demo/enter-leave.md @@ -0,0 +1,60 @@ +# 进场和离场 + +- order: 2 + +通过把属性设置一个数组来分别表示进出场的效果，`type`、`animConfig`、`delay`、`duration`、`interval`、`ease` 等属性均支持配置为数组。 + +--- + +````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-enter-leave')); +```` diff --git a/components/enter-animation/demo/form.md b/components/queue-anim/demo/form.md similarity index 68% rename from components/enter-animation/demo/form.md rename to components/queue-anim/demo/form.md index e033d1faf6..eff4a9d62c 100644 --- a/components/enter-animation/demo/form.md +++ b/components/queue-anim/demo/form.md @@ -1,13 +1,13 @@ # 表单动画进出场 -- order: 6 +- order: 4 表单组合的进场与出场动画。 --- ````jsx -var EnterAnimation = antd.EnterAnimation; +var QueueAnim = antd.QueueAnim; var Select = antd.Select; var Option = Select.Option; var Checkbox = antd.Checkbox; @@ -18,49 +18,35 @@ 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 ?
    -
    +

    + + {this.state.show ? [ +

    大眼萌 minion

    -
    -
    +
    , +
    -
    -
    +
    , +
    @@ -68,35 +54,33 @@ var Test = React.createClass({ 女的
    -
    -
    +
    , +

    随便写点什么

    -
    -
    +
    , +
    -
    -
    +
    , +
    -
    : null} - + ] : null} +
    - ) + ); } }); -ReactDOM.render( -, document.getElementById('components-enter-animation-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 new file mode 100644 index 0000000000..e2537ebd66 --- /dev/null +++ b/components/queue-anim/demo/page.md @@ -0,0 +1,79 @@ +# 一个复杂些的例子 + +- 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} +     +
    + ); + } +}); + +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 new file mode 100644 index 0000000000..723d7cf8d4 --- /dev/null +++ b/components/queue-anim/demo/router.md @@ -0,0 +1,148 @@ +# 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 ( +
    +
    +
    + +
    + +
  • +
  • +
  • +
  • +
  • +
  • +     +     +
    +
    +
    + ); + } +}); + +ReactDOM.render(( + + + + + + +), document.getElementById('components-queue-anim-demo-router')); +```` + +````css +#components-queue-anim-demo-router .demo-router-wrap { + position: relative; + width: 100%; + margin: auto; + height:200px; + overflow: hidden; +} +#components-queue-anim-demo-router .queue-anim-leaving { + position: absolute; + width:100%; +} +```` diff --git a/components/queue-anim/demo/simple.md b/components/queue-anim/demo/simple.md new file mode 100644 index 0000000000..f87a5caeb9 --- /dev/null +++ b/components/queue-anim/demo/simple.md @@ -0,0 +1,34 @@ +# 默认 + +- order: 0 + +最简单的进场例子。 + +--- + +````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/index.jsx b/components/queue-anim/index.jsx new file mode 100644 index 0000000000..d94d1c4ea3 --- /dev/null +++ b/components/queue-anim/index.jsx @@ -0,0 +1,3 @@ +import QueueAnim from 'rc-queue-anim'; + +export default QueueAnim; diff --git a/components/enter-animation/index.md b/components/queue-anim/index.md similarity index 51% rename from components/enter-animation/index.md rename to components/queue-anim/index.md index d28f23290b..a3a800a180 100644 --- a/components/enter-animation/index.md +++ b/components/queue-anim/index.md @@ -1,8 +1,7 @@ -# EnterAnimation +# QueueAnim - category: Components -- chinese: 进场动画 - +- chinese: 进出场动画 --- @@ -14,86 +13,37 @@ - 小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，使页面转场更加流畅和舒适，提高整体视觉效果和产品的质感。 +- 特别适合首页和需要视觉展示效果的宣传页，以及单页应用的切换页面动效。 + ## API 元素依次进场。 ```html - -
    -
    依次进场
    -
    依次进场
    -
    依次进场
    -
    依次进场
    -
    -     + +
    依次进场
    +
    依次进场
    +
    依次进场
    +
    依次进场
    +     ``` -如子节点有 `enter-data` 值，则只执行有 `enter-data` 的节点的动画，相反所有子节点上都没有 `enter-data` 值，则执行遍历 dom 下一级节点来执行动画。 +> 每个子标签必须带 key，如果未设置 key 将不执行动画。 -```html - -
    -
    -
    - 依次进场 -
    -
    -
    依次进场
    -
    依次进场，并修改动画效果
    -
    没有动画
    -
    -     -``` +|参数 |类型 |默认 |详细 | +|------------|----------------|---------|----------------| +| 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 | 100 | 每个动画的间隔时间,以毫秒为单位 | +| 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 替换的标签名 | -### - -|参数 |类型 |默认值 |详细 | -|-----------------|-------|-------------|----------------------------------------------------| -|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` 及更早的版本将没有进场效果。 +> 当以上数据类型为 Array 时，`['left', 'top']` 第一个为进场动画属性, 第二个为离场属性。