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",