From 2b85689477336fa74879c37e43d4421a9f0605a1 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 28 Jul 2015 18:33:40 +0800 Subject: [PATCH] update animation demo --- components/enter-animation/demo/basic.md | 223 +++-------------- components/enter-animation/demo/enter-data.md | 85 +++++++ components/enter-animation/demo/label.md | 228 ------------------ components/enter-animation/index.md | 201 +++++++++++++-- 4 files changed, 311 insertions(+), 426 deletions(-) create mode 100644 components/enter-animation/demo/enter-data.md delete mode 100644 components/enter-animation/demo/label.md diff --git a/components/enter-animation/demo/basic.md b/components/enter-animation/demo/basic.md index 7ad3c227e3..b092406472 100644 --- a/components/enter-animation/demo/basic.md +++ b/components/enter-animation/demo/basic.md @@ -1,228 +1,85 @@ -# 基本(子节点控制进场) +# 默认 + - order: 0 -模拟页面演示，子节点控制进场。`EnterAnimation` 里延时1秒`enter-data` 用到的参数：`type` `queueId` `delay`。 +默认子节点进场动画。`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-basic')); + +React.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 new file mode 100644 index 0000000000..6615e77126 --- /dev/null +++ b/components/enter-animation/demo/enter-data.md @@ -0,0 +1,85 @@ +# 指定节点动画进场 + +- order: 1 + +通过加上 `enter-data` 属性来指定需要动画进场的元素，并且可以定义每个元素的动画效果，用到的参数有 `type` `queueId` `delay`。 + +--- + +````jsx +var EnterAnimation = antd.EnterAnimation; + +var Test = React.createClass({ + render() { + return ( + +
+
+ + logo +
+
    +
  • +
  • +
  • +
  • +
  • +
+
+
+
我是标题
+
+
    +
  • +
  • +
  • +
+
+
我是标题
+
+
    +
  • +
    +
    +
      +
    • +
    • +
    • +
    • +
    • +
    +
    +
    • +
  • +
    +
    +
      +
    • +
    • +
    • +
    • +
    • +
    +
    +
    • +
+
+
+
+ + ) + } +}); + +React.render( +, document.getElementById('components-enter-animation-demo-enter-data')); +```` + + diff --git a/components/enter-animation/demo/label.md b/components/enter-animation/demo/label.md deleted file mode 100644 index cfcdc484e6..0000000000 --- a/components/enter-animation/demo/label.md +++ /dev/null @@ -1,228 +0,0 @@ -# 主标签控制动画 -- 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.md b/components/enter-animation/index.md index 2e5e40866f..83f42197bf 100644 --- a/components/enter-animation/index.md +++ b/components/enter-animation/index.md @@ -11,15 +11,38 @@ ## 何时使用 -1.从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。 +- 从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。 -2.小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，使页面转场更加流畅和舒适，提高整体视觉效果和产品的质感。 +- 小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，使页面转场更加流畅和舒适，提高整体视觉效果和产品的质感。 ## API -动画默认`right` +```jsx + +
依次进场
+
依次进场
+
依次进场
+
依次进场
+ +``` -### EnterAnimation标签下： +```jsx + +
+
+ 依次进场 +
+
+
依次进场
+
依次进场，并修改动画效果
+
没有动画
+ +``` + +如子节点有 `enter-data` 值，则只执行有 `enter-data` 的节点的动画，相反所有子节点上都没有 `enter-data` 值，则执行遍历dom下一级节点来执行动画。 + + +### |参数 |类型 |默认值 |详细 | |-----------------|-------|-------------|----------------------------------------------------| @@ -28,24 +51,172 @@ |delay |number |0 |整个区块的延时，以秒为单位| |interval |number |0.1 |递增延时值，以秒为单位| -### dom子标签下： +### enter-data |参数 |类型 |默认值 |详细 | |-----------------|-------|-----------|----------------------------------------------------| |enter-data |object | right |子标签动画参数| -#### enter-data参数列表 +#### 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`| +|type |string |right |内置动画样式：
`alpha` `left` `right` `top` `bottom` `scale` `scaleFrom` `scaleX` `scaleY`| +|style |string |null |动画样式，如 `transform: translateX(100px)`，`type` 有值此项无效| +|direction |string |"enter" |动画进出场方向：`enter` `leave`| |duration |number |0.5 |动画的时间,以秒为单位| -|ease |string |cubic-bezier(0.165, 0.84, 0.44, 1)|样式缓动，只支持css样式缓动| -|delay |number |0 |动画的延时，依照结构递增以上的`interval`| +|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`。 +