From bf1d703274af0e3c2b7141b73c6d9bdbe43188d4 Mon Sep 17 00:00:00 2001 From: jljsj Date: Mon, 19 Oct 2015 15:36:32 +0800 Subject: [PATCH] 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"