diff --git a/components/enter-animation/demo/basic.md b/components/enter-animation/demo/basic.md index 13e58055b8..7ad3c227e3 100644 --- a/components/enter-animation/demo/basic.md +++ b/components/enter-animation/demo/basic.md @@ -1,51 +1,228 @@ -# 基本 - +# 基本(子节点控制进场) - order: 0 -第一个对话框。 +模拟页面演示，子节点控制进场。`EnterAnimation` 里延时1秒`enter-data` 用到的参数：`type` `queueId` `delay`。 --- - ````jsx var EnterAnimation = antd.EnterAnimation; - var Test = React.createClass({ - getInitialState(){ - return{ - visible: false - } - }, - showModal() { - this.setState({ - visible: true - }); - }, - handleOk() { - console.log('点击了确定'); - this.setState({ - visible: false - }); - }, - handleCancel() { - console.log('点击了取消'); - this.setState({ - visible: false - }); - }, render() { - return
- - -

对话框的内容

-

对话框的内容

-

对话框的内容

- -
; + return ( + +
+
+ + logo +
+ +
+
+
我是标题
+
+
    +
  • +
  • +
  • +
+
+
我是标题
+
+
    +
  • +
    +
    +
      +
    • +
    • +
    • +
    • +
    • +
    +
    +
    • +
  • +
    +
    +
      +
    • +
    • +
    • +
    • +
    • +
    +
    +
    • +
+
+
+
+ + ) } }); - -React.render( , document.getElementById('components-modal-demo-basic')); +React.render( , document.getElementById('components-enter-animation-demo-basic')); ```` + diff --git a/components/enter-animation/demo/label.md b/components/enter-animation/demo/label.md new file mode 100644 index 0000000000..cfcdc484e6 --- /dev/null +++ b/components/enter-animation/demo/label.md @@ -0,0 +1,228 @@ +# 主标签控制动画 +- order: 1 + +主标签上控制进场, `EnterAnimation` 里延时1秒,递增`interval`为0.2; + +--- +````jsx +var EnterAnimation = antd.EnterAnimation; +var Test = React.createClass({ + render() { + return ( + +
+
+ + logo +
+
    +
  • +
  • +
  • +
  • +
  • +
+
+
+
我是标题
+
+
    +
  • +
  • +
  • +
+
+
我是标题
+
+
    +
  • +
    +
    +
      +
    • +
    • +
    • +
    • +
    • +
    +
    +
    • +
  • +
    +
    +
      +
    • +
    • +
    • +
    • +
    • +
    +
    +
    • +
+
+
+
+ + ) + } +}); +React.render( , document.getElementById('components-enter-animation-demo-label')); +```` + diff --git a/components/enter-animation/index.jsx b/components/enter-animation/index.jsx index 097dfb74c1..9c5f5ec932 100644 --- a/components/enter-animation/index.jsx +++ b/components/enter-animation/index.jsx @@ -6,3 +6,4 @@ export default class AntEnterAnimation extends React.Component { return ; } } +AntEnterAnimation.to = EnterAnimation.to; diff --git a/components/enter-animation/index.md b/components/enter-animation/index.md index 7c8a41251b..2e5e40866f 100644 --- a/components/enter-animation/index.md +++ b/components/enter-animation/index.md @@ -3,6 +3,7 @@ - order: 11 - category: Components - chinese: 进场动画 +- cols: 1 --- @@ -10,9 +11,41 @@ ## 何时使用 -当页面分为几个明显的区块时，用一组进场动画渐进载入各个区块，使页面转场更加流畅和舒适， -提高整体视觉效果和产品的质感。 +1.从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。 + +2.小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，使页面转场更加流畅和舒适，提高整体视觉效果和产品的质感。 ## API +动画默认`right` +### EnterAnimation标签下： + +|参数 |类型 |默认值 |详细 | +|-----------------|-------|-------------|----------------------------------------------------| +|type |string |right |执行动画的内置参数 | +|style |string |null |同上，style的样式动画,`type`有值，此项无效| +|delay |number |0 |整个区块的延时，以秒为单位| +|interval |number |0.1 |递增延时值，以秒为单位| + +### dom子标签下： + +|参数 |类型 |默认值 |详细 | +|-----------------|-------|-----------|----------------------------------------------------| +|enter-data |object | right |子标签动画参数| + +#### enter-data参数列表 + +|参数 |类型 |默认值 |详细 | +|-----------------|-----------------|----------------|----------------------------------------------------| +|type |string |right |内置动画样式：
`alpha` `left` `right` `top` `bottom` `scale` `scaleFrom` `scaleX` `scaleY`;| +|style |string |null |style样式，如transform: translateX(100px),每个样式必须以;结束；`type`有值此项无效| +|direction |string |"enter" |动画进场或出场样式,以 `enter` `leave`两值;默认为 `enter`| +|duration |number |0.5 |动画的时间,以秒为单位| +|ease |string |cubic-bezier(0.165, 0.84, 0.44, 1)|样式缓动，只支持css样式缓动| +|delay |number |0 |动画的延时，依照结构递增以上的`interval`| +|queueId |number |0 |动画的线程| + +注：如子节点有 `enter-data` 值，则只执行有 `enter-data` 的节点的动画，相反所有子节点上都没有 `enter-data` 值，则执行遍历dom下一级节点来执行动画。 + +如果标签上的 `enter-data` 没 `type` || `style` ，则执行 `EnterAnimation` 标签上的 `type` || `style`。 diff --git a/package.json b/package.json index 5a24f01080..04d2e7b98f 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ ], "license": "MIT", "dependencies": { - "enter-animation": "^0.1.0", + "enter-animation": "~0.1.1", "gregorian-calendar": "~3.0.0", "gregorian-calendar-format": "~3.0.1", "object-assign": "~3.0.0",