From eea48ffe160b5d25f7546f9c3171a3cf0ffd757e Mon Sep 17 00:00:00 2001 From: zhujun24 Date: Mon, 27 Jul 2015 20:53:08 +0800 Subject: [PATCH 01/34] Alert component --- components/alert/demo/basic.md | 22 ++++ components/alert/demo/callback.md | 33 ++++++ components/alert/demo/close-type.md | 27 +++++ components/alert/demo/style.md | 34 ++++++ components/alert/demo/title.md | 38 +++++++ components/alert/index.jsx | 63 +++++++++++ components/alert/index.md | 20 +++- index.js | 3 +- style/components/alert.less | 167 ++++++++++++++++++++++++++++ style/components/index.less | 1 + 10 files changed, 405 insertions(+), 3 deletions(-) create mode 100644 components/alert/demo/basic.md create mode 100644 components/alert/demo/callback.md create mode 100644 components/alert/demo/close-type.md create mode 100644 components/alert/demo/style.md create mode 100644 components/alert/demo/title.md create mode 100644 components/alert/index.jsx create mode 100644 style/components/alert.less diff --git a/components/alert/demo/basic.md b/components/alert/demo/basic.md new file mode 100644 index 0000000000..5ddf19f529 --- /dev/null +++ b/components/alert/demo/basic.md @@ -0,0 +1,22 @@ +# 基本 + +- order: 0 + +最简单的用法。 + +--- + +````jsx + +var Alert = require('antd/lib/alert'); + +React.render( +
+ +
, +document.getElementById('components-alert-demo-basic')); + +```` diff --git a/components/alert/demo/callback.md b/components/alert/demo/callback.md new file mode 100644 index 0000000000..38ee979644 --- /dev/null +++ b/components/alert/demo/callback.md @@ -0,0 +1,33 @@ +# 回调函数 + +- order: 4 + +警告提示被关闭时触发的毁掉函数。 + +--- + +````jsx + +var Alert = require('antd/lib/alert'); + +var callback = function(){ + alert('我要被关闭啦！'); +} + +React.render( +
+ + +
, +document.getElementById('components-alert-demo-callback')); + +```` diff --git a/components/alert/demo/close-type.md b/components/alert/demo/close-type.md new file mode 100644 index 0000000000..c26a68444b --- /dev/null +++ b/components/alert/demo/close-type.md @@ -0,0 +1,27 @@ +# 关闭的样式 + +- order: 3 + +关闭有`不再提醒`和Iconfont的`cross`两种样式，默认为后者，当警告提示含有标题时，关闭样式只能为默认值。 + +--- + +````jsx + +var Alert = require('antd/lib/alert'); + +React.render( +
+ + +
, +document.getElementById('components-alert-demo-close-type')); + +```` diff --git a/components/alert/demo/style.md b/components/alert/demo/style.md new file mode 100644 index 0000000000..634c3f20f5 --- /dev/null +++ b/components/alert/demo/style.md @@ -0,0 +1,34 @@ +# 四种样式 + +- order: 1 + +共有四种样式`success`、`info`、`warn`、`error`。 + +--- + +````jsx + +var Alert = require('antd/lib/alert'); + +React.render( +
+ + + + +
, +document.getElementById('components-alert-demo-style')); + +```` diff --git a/components/alert/demo/title.md b/components/alert/demo/title.md new file mode 100644 index 0000000000..fbae54463d --- /dev/null +++ b/components/alert/demo/title.md @@ -0,0 +1,38 @@ +# 含有标题 + +- order: 2 + +警告提示的标题文案，当含有标题时，关闭样式只能为默认值。 + +--- + +````jsx + +var Alert = require('antd/lib/alert'); + +React.render( +
+ + + + +
, +document.getElementById('components-alert-demo-title')); + +```` diff --git a/components/alert/index.jsx b/components/alert/index.jsx new file mode 100644 index 0000000000..e53876958d --- /dev/null +++ b/components/alert/index.jsx @@ -0,0 +1,63 @@ +import React from 'react'; + +export default React.createClass({ + getDefaultProps() { + return {prefixCls: 'ant-alert'}; + }, + getInitialState () { + return {display: 'block'}; + }, + handleClose () { + if (this.props.callback) { + this.props.callback(); + } + this.setState({ + display: 'none' + }); + }, + render () { + var iconClass = this.props.title ? 'ant-alert-with-title-icon anticon-' : 'ant-alert-icon anticon-'; + switch (this.props.alertType) { + case 'success': + iconClass += 'check-circle'; + break; + case 'info': + iconClass += 'question-circle'; + break; + case 'error': + case 'warn': + iconClass += 'info-circle'; + break; + default: + iconClass += 'default'; + } + if (this.props.title) { + return ( +
+ +

{this.props.title}

+ {this.props.message} + +
+ ); + } else { + if (this.props.alertClose === 'text') { + return ( +
+ + {this.props.message} + 不再提醒 +
+ ); + } else { + return ( +
+ + {this.props.message} + +
+ ); + } + } + } +}); diff --git a/components/alert/index.md b/components/alert/index.md index 184a8c2b0a..9d1948b420 100644 --- a/components/alert/index.md +++ b/components/alert/index.md @@ -1,6 +1,22 @@ # Alert -- category: CSS -- chinese: 通知栏 +- category: Components +- chinese: 警告提示 --- + +警告提示。 + +## 何时使用 + +- 当系统需要向用户显示警告的信息时。 + +## API + +| 参数 | 说明 | 类型 | 默认值 | +|----------- |--------------------------------------------------------- | ---------- |-------| +| alertType | 必选参数，指定警告提示的样式，目前有有四种选择`success`、`info`、`warn`、`error` | String | 无 | +| alertClose | 可选参数，指定关闭的样式，目前有两种选择`text`、`icon` | String | icon | +| title | 可选参数，指定标题 | String | 无 | +| message | 必选参数，指定内容 | String | 无 | +| callback | 可选参数，指定关闭时触发的回调函数 | Function | 无 | diff --git a/index.js b/index.js index 78dad62408..ede8d8c703 100644 --- a/index.js +++ b/index.js @@ -23,7 +23,8 @@ var antd = { message: require('./components/message'), Slider: require('./components/slider'), Radio: require('./components/radio'), - RadioGroup: require('./components/radio/group') + RadioGroup: require('./components/radio/group'), + Alert: require('./components/alert') }; module.exports = antd; diff --git a/style/components/alert.less b/style/components/alert.less new file mode 100644 index 0000000000..e0fb15ed3b --- /dev/null +++ b/style/components/alert.less @@ -0,0 +1,167 @@ +@import "../mixins/index"; + +@alertPrefixClass: ~"@{css-prefix}alert"; +@alertTitlePrefixClass: ~"@{css-prefix}alert-with-title"; + +.@{alertPrefixClass} { + position: relative; + padding: 8px 8px 8px 16px; + border-radius: @border-radius-base; + color: @legend-color; + font-size: 12px; + line-height: 16px; + margin-bottom: 10px; + + &-icon { + margin-right: 8px; + font-size: @input-font-size-lg; + } + + &-message { + font-size: 12px; + line-height: 16px; + } + + &-success { + border: 1px solid tint(@success-color, 50%); + background-color: tint(@success-color, 90%); + .anticon { + color: #87d068; + } + .anticon.ant-alert-close-icon { + color: @legend-color; + } + } + + &-info { + border: 1px solid tint(@primary-color, 50%); + background-color: tint(@primary-color, 90%); + .anticon { + color: #3fc7fa; + } + .anticon.ant-alert-close-icon { + color: @legend-color; + } + } + + &-warn { + border: 1px solid tint(@warning-color, 50%); + background-color: tint(@warning-color, 90%); + .anticon { + color: #fd9856; + } + .anticon.ant-alert-close-icon { + color: @legend-color; + } + } + + &-error { + border: 1px solid tint(@error-color, 50%); + background-color: tint(@error-color, 90%); + .anticon { + color: #ff6600; + } + .anticon.ant-alert-close-icon { + color: @legend-color; + } + } + + &-close-icon { + .iconfont-size-under-12px(10px); + color: @legend-color; + cursor: pointer; + float: right; + } + + &-close-text { + color: @legend-color; + cursor: pointer; + float: right; + } + + &-close-text:active { + color: shade(@primary-color, 5%); + } + + &-close-text:hover { + color: tint(@primary-color, 5%); + } +} + +.@{alertTitlePrefixClass} { + padding: 16px 16px 16px 69px; + position: relative; + border-radius: @border-radius-base; + margin-bottom: 10px; + + &-icon { + position: absolute; + top: 50%; + left: 24px; + margin-top: -22px; + font-size: 29px; + } + + &-close-icon { + position: absolute; + top: 12px; + right: 16px; + color: @legend-color; + cursor: pointer; + .iconfont-size-under-12px(10px); + } + + &-title { + font-size: @input-font-size-lg; + color: @text-color; + } + + &-message { + font-size: 12px; + color: @legend-color; + } + + &-success { + border: 1px solid tint(@success-color, 50%); + background-color: tint(@success-color, 90%); + .anticon { + color: #87d068; + } + .anticon.ant-alert-with-title-close-icon { + color: @legend-color; + } + } + + &-info { + border: 1px solid tint(@primary-color, 50%); + background-color: tint(@primary-color, 90%); + .anticon { + color: #3fc7fa; + } + .anticon.ant-alert-with-title-close-icon { + color: @legend-color; + } + } + + &-warn { + border: 1px solid tint(@warning-color, 50%); + background-color: tint(@warning-color, 90%); + .anticon { + color: #fd9856; + } + .anticon.ant-alert-with-title-close-icon { + color: @legend-color; + } + } + + &-error { + border: 1px solid tint(@error-color, 50%); + background-color: tint(@error-color, 90%); + .anticon { + color: #ff6600; + } + .anticon.ant-alert-with-title-close-icon { + color: @legend-color; + } + } +} \ No newline at end of file diff --git a/style/components/index.less b/style/components/index.less index 81ac64f5f4..3f6ffb4c8a 100644 --- a/style/components/index.less +++ b/style/components/index.less @@ -24,3 +24,4 @@ @import "divider"; @import "slider"; @import "radio"; +@import "alert"; From 699a6c9ad3cb2dd6a80e7d504cc07bed956222c7 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 28 Jul 2015 12:32:27 +0800 Subject: [PATCH 02/34] Add enter-animation --- components/enter-animation/demo/basic.md | 51 ++++++++++++++++++++++++ components/enter-animation/index.jsx | 8 ++++ components/enter-animation/index.md | 18 +++++++++ index.js | 1 + package.json | 1 + 5 files changed, 79 insertions(+) create mode 100644 components/enter-animation/demo/basic.md create mode 100644 components/enter-animation/index.jsx create mode 100644 components/enter-animation/index.md diff --git a/components/enter-animation/demo/basic.md b/components/enter-animation/demo/basic.md new file mode 100644 index 0000000000..13e58055b8 --- /dev/null +++ b/components/enter-animation/demo/basic.md @@ -0,0 +1,51 @@ +# 基本 + +- order: 0 + +第一个对话框。 + +--- + +````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
+ + +

对话框的内容

+

对话框的内容

+

对话框的内容

+ +
; + } +}); + +React.render( , document.getElementById('components-modal-demo-basic')); +```` diff --git a/components/enter-animation/index.jsx b/components/enter-animation/index.jsx new file mode 100644 index 0000000000..097dfb74c1 --- /dev/null +++ b/components/enter-animation/index.jsx @@ -0,0 +1,8 @@ +import React from 'react'; +import EnterAnimation from 'enter-animation'; + +export default class AntEnterAnimation extends React.Component { + render() { + return ; + } +} diff --git a/components/enter-animation/index.md b/components/enter-animation/index.md new file mode 100644 index 0000000000..4e2efbef0e --- /dev/null +++ b/components/enter-animation/index.md @@ -0,0 +1,18 @@ +# Modal + +- order: 11 +- category: Components +- chinese: 进场动画 + +--- + +页面进场离场的动画。 + +## 何时使用 + +当页面分为几个明显的区块时，用一组进场动画渐进载入各个区块，使页面转场更加流畅和舒适， +提高整体视觉效果和产品的质感。 + +## API + + diff --git a/index.js b/index.js index 78dad62408..6a62263035 100644 --- a/index.js +++ b/index.js @@ -22,6 +22,7 @@ var antd = { Collapse: require('./components/collapse'), message: require('./components/message'), Slider: require('./components/slider'), + EnterAnimation: require('./components/enter-animation'), Radio: require('./components/radio'), RadioGroup: require('./components/radio/group') }; diff --git a/package.json b/package.json index 0fc1cb4469..5a24f01080 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ ], "license": "MIT", "dependencies": { + "enter-animation": "^0.1.0", "gregorian-calendar": "~3.0.0", "gregorian-calendar-format": "~3.0.1", "object-assign": "~3.0.0", From 7aa01c464ef77db46554690975cee0cc466daefb Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 28 Jul 2015 12:33:09 +0800 Subject: [PATCH 03/34] change index.md title --- components/enter-animation/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/enter-animation/index.md b/components/enter-animation/index.md index 4e2efbef0e..7c8a41251b 100644 --- a/components/enter-animation/index.md +++ b/components/enter-animation/index.md @@ -1,4 +1,4 @@ -# Modal +# EnterAnimation - order: 11 - category: Components From 405b85b60b5368a3039ff60ca21eda5ca18af6f8 Mon Sep 17 00:00:00 2001 From: zhujun24 Date: Tue, 28 Jul 2015 14:52:01 +0800 Subject: [PATCH 04/34] close icon style --- style/components/alert.less | 78 +++++++++++++++++++++++++++++++------ 1 file changed, 67 insertions(+), 11 deletions(-) diff --git a/style/components/alert.less b/style/components/alert.less index e0fb15ed3b..a01954ee3e 100644 --- a/style/components/alert.less +++ b/style/components/alert.less @@ -30,6 +30,13 @@ } .anticon.ant-alert-close-icon { color: @legend-color; + + &:active{ + color: shade(@primary-color, 5%); + } + &:hover{ + color: tint(@primary-color, 5%); + } } } @@ -41,6 +48,13 @@ } .anticon.ant-alert-close-icon { color: @legend-color; + + &:active{ + color: shade(@primary-color, 5%); + } + &:hover{ + color: tint(@primary-color, 5%); + } } } @@ -52,6 +66,13 @@ } .anticon.ant-alert-close-icon { color: @legend-color; + + &:active{ + color: shade(@primary-color, 5%); + } + &:hover{ + color: tint(@primary-color, 5%); + } } } @@ -63,29 +84,37 @@ } .anticon.ant-alert-close-icon { color: @legend-color; + + &:active{ + color: shade(@primary-color, 5%); + } + &:hover{ + color: tint(@primary-color, 5%); + } } } &-close-icon { .iconfont-size-under-12px(10px); - color: @legend-color; + //color: @legend-color; + //color: red; cursor: pointer; float: right; + + &:active{ + color: shade(@primary-color, 5%); + color: red; + } + &:hover{ + color: tint(@primary-color, 5%); + color: red; + } } &-close-text { - color: @legend-color; cursor: pointer; float: right; } - - &-close-text:active { - color: shade(@primary-color, 5%); - } - - &-close-text:hover { - color: tint(@primary-color, 5%); - } } .@{alertTitlePrefixClass} { @@ -106,7 +135,6 @@ position: absolute; top: 12px; right: 16px; - color: @legend-color; cursor: pointer; .iconfont-size-under-12px(10px); } @@ -129,6 +157,13 @@ } .anticon.ant-alert-with-title-close-icon { color: @legend-color; + + &:active{ + color: shade(@primary-color, 5%); + } + &:hover{ + color: tint(@primary-color, 5%); + } } } @@ -140,6 +175,13 @@ } .anticon.ant-alert-with-title-close-icon { color: @legend-color; + + &:active{ + color: shade(@primary-color, 5%); + } + &:hover{ + color: tint(@primary-color, 5%); + } } } @@ -151,6 +193,13 @@ } .anticon.ant-alert-with-title-close-icon { color: @legend-color; + + &:active{ + color: shade(@primary-color, 5%); + } + &:hover{ + color: tint(@primary-color, 5%); + } } } @@ -162,6 +211,13 @@ } .anticon.ant-alert-with-title-close-icon { color: @legend-color; + + &:active{ + color: shade(@primary-color, 5%); + } + &:hover{ + color: tint(@primary-color, 5%); + } } } } \ No newline at end of file From 87c68279e18c94928823190c0a4cb16af471c162 Mon Sep 17 00:00:00 2001 From: jljsj Date: Tue, 28 Jul 2015 15:16:51 +0800 Subject: [PATCH 05/34] add enterAnimation --- components/enter-animation/demo/basic.md | 318 ++++++++++++++++++++--- components/enter-animation/demo/label.md | 295 +++++++++++++++++++++ components/enter-animation/index.jsx | 1 + components/enter-animation/index.md | 39 ++- package.json | 2 +- 5 files changed, 615 insertions(+), 40 deletions(-) create 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 13e58055b8..bbb609d135 100644 --- a/components/enter-animation/demo/basic.md +++ b/components/enter-animation/demo/basic.md @@ -1,51 +1,295 @@ -# 基本 +# 基本(子节点控制进场) - order: 0 -第一个对话框。 +模拟页面demo;子节点控制进场;`EnterAnimation`里延时1秒`enter-data`用到的参数：`type` `queueId` `delay`; --- ````jsx -var EnterAnimation = antd.EnterAnimation; +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-enter-animation-demo-basic')); -React.render( , document.getElementById('components-modal-demo-basic')); ```` + diff --git a/components/enter-animation/demo/label.md b/components/enter-animation/demo/label.md new file mode 100644 index 0000000000..002ca072c8 --- /dev/null +++ b/components/enter-animation/demo/label.md @@ -0,0 +1,295 @@ +# 主标签控制动画 + +- 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..c09c73259c 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,43 @@ ## 何时使用 -当页面分为几个明显的区块时，用一组进场动画渐进载入各个区块，使页面转场更加流畅和舒适， -提高整体视觉效果和产品的质感。 +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 |内置动画样式：
`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 |动画的延时;默认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..49ed2a9ec2 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", From fbb7a99a9e9415f888430086443c8092fd07823e Mon Sep 17 00:00:00 2001 From: jljsj Date: Tue, 28 Jul 2015 15:42:43 +0800 Subject: [PATCH 06/34] updata --- components/enter-animation/demo/basic.md | 69 +----------------------- components/enter-animation/demo/label.md | 68 +---------------------- components/enter-animation/index.md | 20 +++---- package.json | 2 +- 4 files changed, 15 insertions(+), 144 deletions(-) diff --git a/components/enter-animation/demo/basic.md b/components/enter-animation/demo/basic.md index bbb609d135..7cfdd70f21 100644 --- a/components/enter-animation/demo/basic.md +++ b/components/enter-animation/demo/basic.md @@ -2,7 +2,7 @@ - order: 0 -模拟页面demo;子节点控制进场;`EnterAnimation`里延时1秒`enter-data`用到的参数：`type` `queueId` `delay`; +模拟页面demo，子节点控制进场。`EnterAnimation` 里延时1秒`enter-data` 用到的参数：`type` `queueId` `delay`。 --- @@ -107,7 +107,7 @@ React.render( , document.getElementById('components-enter-animation-demo- line-height: 32px; } .demo-startAnim .demo-header .logo img{ -margin:auto + margin:auto } .demo-startAnim .demo-header .logo span { display: block; @@ -227,69 +227,4 @@ margin:auto display: block; content: ""; } -a.logo { - float: left; - height: 46px; - line-height: 46px; - margin: 17px 45px; - transition: margin 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), width 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), height 0.3s cubic-bezier(0.075, 0.82, 0.165, 1); - text-transform: uppercase; - font-size: 18px; - font-family: "Raleway", "Helvetica Neue", Helvetica, "Lantinghei SC", "Microsoft YaHei", "微软雅黑", "Hiragino Sans GB", SimSun, sans-serif; - font-weight: 500; - color: #6EB4E0; -} -a.logo img { - float: left; - -webkit-animation: rotateCircleBack 0.6s 1 ease-in-out; - animation: rotateCircleBack 0.6s 1 ease-in-out; -} -.test { - opacity: 0; - -webkit-animation: TTest 0.5s ease-out; - animation: TTest 0.5s ease-out; -} -@-webkit-keyframes TTest { - 0% { - opacity: 0; - } - 0%, - 100% { - -webkit-transform: translateX(0px); - transform: translateX(0px); - } - 20%, - 60% { - opacity: 1; - -webkit-transform: translateX(30px); - transform: translateX(30px); - } - 40%, - 80% { - -webkit-transform: translateX(-30px); - transform: translateX(-30px); - } -} -@keyframes TTest { - 0% { - opacity: 0; - } - 0%, - 100% { - -webkit-transform: translateX(0px); - transform: translateX(0px); - } - 20%, - 60% { - opacity: 1; - -webkit-transform: translateX(30px); - transform: translateX(30px); - } - 40%, - 80% { - -webkit-transform: translateX(-30px); - transform: translateX(-30px); - } -} - diff --git a/components/enter-animation/demo/label.md b/components/enter-animation/demo/label.md index 002ca072c8..3f21963f28 100644 --- a/components/enter-animation/demo/label.md +++ b/components/enter-animation/demo/label.md @@ -2,7 +2,7 @@ - order: 1 -主标签上控制进场;`EnterAnimation`里延时1秒;递增`interval`为0.2; +主标签上控制进场, `EnterAnimation` 里延时1秒,递增`interval`为0.2; --- @@ -107,7 +107,7 @@ React.render( , document.getElementById('components-enter-animation-demo- line-height: 32px; } .demo-startAnim .demo-header .logo img{ -margin:auto + margin:auto } .demo-startAnim .demo-header .logo span { display: block; @@ -227,69 +227,5 @@ margin:auto display: block; content: ""; } -a.logo { - float: left; - height: 46px; - line-height: 46px; - margin: 17px 45px; - transition: margin 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), width 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), height 0.3s cubic-bezier(0.075, 0.82, 0.165, 1); - text-transform: uppercase; - font-size: 18px; - font-family: "Raleway", "Helvetica Neue", Helvetica, "Lantinghei SC", "Microsoft YaHei", "微软雅黑", "Hiragino Sans GB", SimSun, sans-serif; - font-weight: 500; - color: #6EB4E0; -} -a.logo img { - float: left; - -webkit-animation: rotateCircleBack 0.6s 1 ease-in-out; - animation: rotateCircleBack 0.6s 1 ease-in-out; -} -.test { - opacity: 0; - -webkit-animation: TTest 0.5s ease-out; - animation: TTest 0.5s ease-out; -} -@-webkit-keyframes TTest { - 0% { - opacity: 0; - } - 0%, - 100% { - -webkit-transform: translateX(0px); - transform: translateX(0px); - } - 20%, - 60% { - opacity: 1; - -webkit-transform: translateX(30px); - transform: translateX(30px); - } - 40%, - 80% { - -webkit-transform: translateX(-30px); - transform: translateX(-30px); - } -} -@keyframes TTest { - 0% { - opacity: 0; - } - 0%, - 100% { - -webkit-transform: translateX(0px); - transform: translateX(0px); - } - 20%, - 60% { - opacity: 1; - -webkit-transform: translateX(30px); - transform: translateX(30px); - } - 40%, - 80% { - -webkit-transform: translateX(-30px); - transform: translateX(-30px); - } -} diff --git a/components/enter-animation/index.md b/components/enter-animation/index.md index c09c73259c..22a9ddb664 100644 --- a/components/enter-animation/index.md +++ b/components/enter-animation/index.md @@ -24,10 +24,10 @@ |参数 |类型 |默认值 |详细 | |-----------------|-------|-------------|----------------------------------------------------| -|type |string |right |执行动画的内置参数; | -|style |string |null |同上，style的样式动画,`type`有值，此项无效;| -|delay |number |0 |整个区块的延时;以秒为单位| -|interval |number |0.1 |递增延时值;以秒为单位| +|type |string |right |执行动画的内置参数 | +|style |string |null |同上，style的样式动画,`type`有值，此项无效| +|delay |number |0 |整个区块的延时，以秒为单位| +|interval |number |0.1 |递增延时值，以秒为单位| ### dom子标签下： @@ -41,13 +41,13 @@ |-----------------|-----------------|----------------|----------------------------------------------------| |type |string |right |内置动画样式：
`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 |动画的延时;默认0,依照结构递增以上的`interval`| +|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` 值，则只执行有 `enter-data` 的节点的动画，相反所有子节点上都没有 `enter-data` 值，则执行遍历dom下一级节点来执行动画。 -如果标签上的`enter-data`没`type`||`style`，则执行`EnterAnimation`标签上的`type`||`style`; +如果标签上的 `enter-data` 没 `type` || `style` ，则执行 `EnterAnimation` 标签上的 `type` || `style`。 diff --git a/package.json b/package.json index 49ed2a9ec2..04d2e7b98f 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ ], "license": "MIT", "dependencies": { - "enter-animation": "^0.1.1", + "enter-animation": "~0.1.1", "gregorian-calendar": "~3.0.0", "gregorian-calendar-format": "~3.0.1", "object-assign": "~3.0.0", From fe0ea83ebd81d2dd72f00427b88f1bfc0158c3be Mon Sep 17 00:00:00 2001 From: jljsj Date: Tue, 28 Jul 2015 16:06:45 +0800 Subject: [PATCH 07/34] updata --- components/enter-animation/demo/basic.md | 108 +++++++++++------------ components/enter-animation/demo/label.md | 103 +++++++++++---------- components/enter-animation/index.md | 4 +- 3 files changed, 104 insertions(+), 111 deletions(-) diff --git a/components/enter-animation/demo/basic.md b/components/enter-animation/demo/basic.md index 7cfdd70f21..607472070b 100644 --- a/components/enter-animation/demo/basic.md +++ b/components/enter-animation/demo/basic.md @@ -1,76 +1,73 @@ # 基本(子节点控制进场) - - order: 0 模拟页面demo，子节点控制进场。`EnterAnimation` 里延时1秒`enter-data` 用到的参数：`type` `queueId` `delay`。 --- - ````jsx - var EnterAnimation = antd.EnterAnimation; var Test = React.createClass({ render() { return ( - +
-
- - logo -
-
    -
  • -
  • -
  • -
  • -
  • -
+
+ + logo +
+
    +
  • +
  • +
  • +
  • +
  • +
-
我是标题
-
-
    -
  • -
  • -
  • -
-
-
我是标题
-
-
    -
  • -
    -
    -
      -
    • -
    • -
    • -
    • -
    • -
    -
    -
    • -
  • -
    -
    -
      -
    • -
    • -
    • -
    • -
    • -
    -
    -
    • -
-
+
我是标题
+
+
    +
  • +
  • +
  • +
+
+
我是标题
+
+
    +
  • +
    +
    +
      +
    • +
    • +
    • +
    • +
    • +
    +
    +
    • +
  • +
    +
    +
      +
    • +
    • +
    • +
    • +
    • +
    +
    +
    • +
+
-
- ) +
+ + ) } }); React.render( , document.getElementById('components-enter-animation-demo-basic')); - ```` diff --git a/components/enter-animation/index.md b/components/enter-animation/index.md index 22a9ddb664..2e5e40866f 100644 --- a/components/enter-animation/index.md +++ b/components/enter-animation/index.md @@ -15,7 +15,6 @@ 2.小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，使页面转场更加流畅和舒适，提高整体视觉效果和产品的质感。 - ## API 动画默认`right` @@ -39,7 +38,7 @@ |参数 |类型 |默认值 |详细 | |-----------------|-----------------|----------------|----------------------------------------------------| -|type |string |right |内置动画样式：
`left` `right` `top` `bottom` `scale` `scaleFrom` `scaleX` `scaleY`;| +|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 |动画的时间,以秒为单位| @@ -47,7 +46,6 @@ |delay |number |0 |动画的延时，依照结构递增以上的`interval`| |queueId |number |0 |动画的线程| - 注：如子节点有 `enter-data` 值，则只执行有 `enter-data` 的节点的动画，相反所有子节点上都没有 `enter-data` 值，则执行遍历dom下一级节点来执行动画。 如果标签上的 `enter-data` 没 `type` || `style` ，则执行 `EnterAnimation` 标签上的 `type` || `style`。 From d8ce9894a80d82cbb073eb14077d2962f92be0dd Mon Sep 17 00:00:00 2001 From: jljsj Date: Tue, 28 Jul 2015 16:08:52 +0800 Subject: [PATCH 08/34] updata demo --- components/enter-animation/demo/basic.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/enter-animation/demo/basic.md b/components/enter-animation/demo/basic.md index 607472070b..7ad3c227e3 100644 --- a/components/enter-animation/demo/basic.md +++ b/components/enter-animation/demo/basic.md @@ -1,7 +1,7 @@ # 基本(子节点控制进场) - order: 0 -模拟页面demo，子节点控制进场。`EnterAnimation` 里延时1秒`enter-data` 用到的参数：`type` `queueId` `delay`。 +模拟页面演示，子节点控制进场。`EnterAnimation` 里延时1秒`enter-data` 用到的参数：`type` `queueId` `delay`。 --- ````jsx From 8f1a616b2e50760699c79e4278d6e73db8854521 Mon Sep 17 00:00:00 2001 From: jljsj Date: Tue, 28 Jul 2015 15:16:51 +0800 Subject: [PATCH 09/34] add enterAnimation --- components/enter-animation/demo/basic.md | 257 +++++++++++++++++++---- components/enter-animation/demo/label.md | 228 ++++++++++++++++++++ components/enter-animation/index.jsx | 1 + components/enter-animation/index.md | 37 +++- package.json | 2 +- 5 files changed, 482 insertions(+), 43 deletions(-) create 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 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", From 2b85689477336fa74879c37e43d4421a9f0605a1 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 28 Jul 2015 18:33:40 +0800 Subject: [PATCH 10/34] 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`。 + From 65d6f32e1856a1162c90bee124c3471a2532fe71 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 28 Jul 2015 20:22:37 +0800 Subject: [PATCH 11/34] update radio API document --- components/radio/index.md | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/components/radio/index.md b/components/radio/index.md index c742022a5c..2d8f9498cc 100644 --- a/components/radio/index.md +++ b/components/radio/index.md @@ -6,6 +6,8 @@ --- +单选框。 + ## 何时使用 - 用于在多个备选项中选中单个状态。 @@ -15,21 +17,18 @@ ## API ### Radio -单选框。 -| 参数 | 说明 | 类型 | 必选值 | 默认值 | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | |----------------|------------------------------------------|------------|---------|--------| -| checked | 指定当前是否选中 | boolean | false | false | -| defaultChecked | 初始是否选中 | boolean | false | false | -| value | 组合时根据此项判定checked | -- |true | null| +| checked | 指定当前是否选中 | Boolean | | false | +| defaultChecked | 初始是否选中 | Boolean | | false | +| value | 根据 value 进行比较，判断是否选中 | String | | 无 | ### RadioGroup -单选框组合； - -| 参数 | 说明 | 类型 | 必选值 | 默认值 | -|----------------|------------------------------------------|------------|---------|--------| -| onChange | 变化时回调函数，组合时必须 | Function(e:Event) | false | null | -| value | 当前值 | | | | -| defaultValue | 初始值 | | | | | +单选框组合，用于包裹一组 `Radio`。 +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|----------------|----------------------------------|-------------------|--------|--------| +| onChange | 选项变化时的回调函数 | Function(e:Event) | 无 | 无 | +| value | 用于设置当前选中的值 | String | 无 | 无 | From a4c286fe10d8328fae1bfd588d20ee775f67dc6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Tue, 28 Jul 2015 21:39:57 +0800 Subject: [PATCH 12/34] Update README.md --- README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index d16fca4f42..08626d4e5a 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,11 @@ 设计文档和组件实现均在紧密整理和开发中，部分页面可能不完善，预计 8 月份释出正式版本。 -![](https://t.alipayobjects.com/images/rmsweb/T11aVgXc4eXXXXXXXX.svg) +

+ + + +

## 特性 From c494da18aa22d9287f29f30ebe8821157c7c85e1 Mon Sep 17 00:00:00 2001 From: zhujun24 Date: Wed, 29 Jul 2015 10:27:31 +0800 Subject: [PATCH 13/34] optimize alert --- components/alert/demo/basic.md | 14 +++-- components/alert/demo/callback.md | 32 ++++++----- components/alert/demo/close-type.md | 24 ++++----- components/alert/demo/message.md | 36 +++++++++++++ components/alert/demo/style.md | 38 +++++++------ components/alert/demo/title.md | 38 ------------- components/alert/index.jsx | 26 ++++----- components/alert/index.md | 10 ++-- style/components/alert.less | 82 ++++++++++++++--------------- 9 files changed, 141 insertions(+), 159 deletions(-) create mode 100644 components/alert/demo/message.md delete mode 100644 components/alert/demo/title.md diff --git a/components/alert/demo/basic.md b/components/alert/demo/basic.md index 5ddf19f529..eecfe6289d 100644 --- a/components/alert/demo/basic.md +++ b/components/alert/demo/basic.md @@ -7,16 +7,14 @@ --- ````jsx - var Alert = require('antd/lib/alert'); React.render( -
- -
, +
+ +
, document.getElementById('components-alert-demo-basic')); - ```` diff --git a/components/alert/demo/callback.md b/components/alert/demo/callback.md index 38ee979644..4ab0fab415 100644 --- a/components/alert/demo/callback.md +++ b/components/alert/demo/callback.md @@ -2,32 +2,30 @@ - order: 4 -警告提示被关闭时触发的毁掉函数。 +警告提示被关闭时触发的回调函数。 --- ````jsx - var Alert = require('antd/lib/alert'); var callback = function(){ - alert('我要被关闭啦！'); + console.log('我要被关闭啦！'); } React.render( -
- - -
, +
+ + +
, document.getElementById('components-alert-demo-callback')); - ```` diff --git a/components/alert/demo/close-type.md b/components/alert/demo/close-type.md index c26a68444b..5519163c34 100644 --- a/components/alert/demo/close-type.md +++ b/components/alert/demo/close-type.md @@ -1,27 +1,21 @@ -# 关闭的样式 +# 自定义关闭的文字 - order: 3 -关闭有`不再提醒`和Iconfont的`cross`两种样式，默认为后者，当警告提示含有标题时，关闭样式只能为默认值。 +可以自定义关闭的文字，自定义的文字会替换原先的关闭 `Icon`，当警告提示含有标题时，关闭样式只能为默认值。 --- ````jsx - var Alert = require('antd/lib/alert'); React.render( -
- - -
, +
+ +
, document.getElementById('components-alert-demo-close-type')); - ```` diff --git a/components/alert/demo/message.md b/components/alert/demo/message.md new file mode 100644 index 0000000000..9656265cc4 --- /dev/null +++ b/components/alert/demo/message.md @@ -0,0 +1,36 @@ +# 含有标题 + +- order: 2 + +警告提示的标题文案，当含有标题时，关闭样式只能为默认值。 + +--- + +````jsx +var Alert = require('antd/lib/alert'); + +React.render( +
+ + + + +
, +document.getElementById('components-alert-demo-message')); +```` diff --git a/components/alert/demo/style.md b/components/alert/demo/style.md index 634c3f20f5..052427528e 100644 --- a/components/alert/demo/style.md +++ b/components/alert/demo/style.md @@ -7,28 +7,26 @@ --- ````jsx - var Alert = require('antd/lib/alert'); React.render( -
- - - - -
, +
+ + + + +
, document.getElementById('components-alert-demo-style')); - ```` diff --git a/components/alert/demo/title.md b/components/alert/demo/title.md deleted file mode 100644 index fbae54463d..0000000000 --- a/components/alert/demo/title.md +++ /dev/null @@ -1,38 +0,0 @@ -# 含有标题 - -- order: 2 - -警告提示的标题文案，当含有标题时，关闭样式只能为默认值。 - ---- - -````jsx - -var Alert = require('antd/lib/alert'); - -React.render( -
- - - - -
, -document.getElementById('components-alert-demo-title')); - -```` diff --git a/components/alert/index.jsx b/components/alert/index.jsx index e53876958d..28e933eca0 100644 --- a/components/alert/index.jsx +++ b/components/alert/index.jsx @@ -16,8 +16,8 @@ export default React.createClass({ }); }, render () { - var iconClass = this.props.title ? 'ant-alert-with-title-icon anticon-' : 'ant-alert-icon anticon-'; - switch (this.props.alertType) { + var iconClass = this.props.message ? 'ant-alert-with-message-icon anticon-' : 'ant-alert-icon anticon-'; + switch (this.props.type) { case 'success': iconClass += 'check-circle'; break; @@ -31,29 +31,29 @@ export default React.createClass({ default: iconClass += 'default'; } - if (this.props.title) { + if (this.props.message) { return ( -
+
-

{this.props.title}

- {this.props.message} - +

{this.props.message}

+ {this.props.description} +
); } else { - if (this.props.alertClose === 'text') { + if (this.props.closeText) { return ( -
+
- {this.props.message} - 不再提醒 + {this.props.description} + {this.props.closeText}
); } else { return ( -
+
- {this.props.message} + {this.props.description}
); diff --git a/components/alert/index.md b/components/alert/index.md index 9d1948b420..c81ed247b9 100644 --- a/components/alert/index.md +++ b/components/alert/index.md @@ -15,8 +15,8 @@ | 参数 | 说明 | 类型 | 默认值 | |----------- |--------------------------------------------------------- | ---------- |-------| -| alertType | 必选参数，指定警告提示的样式，目前有有四种选择`success`、`info`、`warn`、`error` | String | 无 | -| alertClose | 可选参数，指定关闭的样式，目前有两种选择`text`、`icon` | String | icon | -| title | 可选参数，指定标题 | String | 无 | -| message | 必选参数，指定内容 | String | 无 | -| callback | 可选参数，指定关闭时触发的回调函数 | Function | 无 | +| type | 必选参数，指定警告提示的样式，有四种选择`success`、`info`、`warn`、`error` | String | 无 | +| closeText | 可选参数，关闭的文字 | String | 无 | +| message | 可选参数，标题 | String | 无 | +| description | 必选参数，内容 | String | 无 | +| callback | 可选参数，关闭时触发的回调函数 | Function | 无 | diff --git a/style/components/alert.less b/style/components/alert.less index a01954ee3e..4b2e63392f 100644 --- a/style/components/alert.less +++ b/style/components/alert.less @@ -1,7 +1,7 @@ @import "../mixins/index"; @alertPrefixClass: ~"@{css-prefix}alert"; -@alertTitlePrefixClass: ~"@{css-prefix}alert-with-title"; +@alertTitlePrefixClass: ~"@{css-prefix}alert-with-message"; .@{alertPrefixClass} { position: relative; @@ -17,7 +17,7 @@ font-size: @input-font-size-lg; } - &-message { + &-description { font-size: 12px; line-height: 16px; } @@ -26,15 +26,15 @@ border: 1px solid tint(@success-color, 50%); background-color: tint(@success-color, 90%); .anticon { - color: #87d068; + color: @success-color; } .anticon.ant-alert-close-icon { color: @legend-color; - &:active{ + &:active { color: shade(@primary-color, 5%); } - &:hover{ + &:hover { color: tint(@primary-color, 5%); } } @@ -44,15 +44,15 @@ border: 1px solid tint(@primary-color, 50%); background-color: tint(@primary-color, 90%); .anticon { - color: #3fc7fa; + color: @primary-color; } .anticon.ant-alert-close-icon { color: @legend-color; - &:active{ + &:active { color: shade(@primary-color, 5%); } - &:hover{ + &:hover { color: tint(@primary-color, 5%); } } @@ -62,15 +62,15 @@ border: 1px solid tint(@warning-color, 50%); background-color: tint(@warning-color, 90%); .anticon { - color: #fd9856; + color: @warning-color; } .anticon.ant-alert-close-icon { color: @legend-color; - &:active{ + &:active { color: shade(@primary-color, 5%); } - &:hover{ + &:hover { color: tint(@primary-color, 5%); } } @@ -80,15 +80,15 @@ border: 1px solid tint(@error-color, 50%); background-color: tint(@error-color, 90%); .anticon { - color: #ff6600; + color: @error-color; } .anticon.ant-alert-close-icon { color: @legend-color; - &:active{ + &:active { color: shade(@primary-color, 5%); } - &:hover{ + &:hover { color: tint(@primary-color, 5%); } } @@ -96,24 +96,20 @@ &-close-icon { .iconfont-size-under-12px(10px); - //color: @legend-color; - //color: red; cursor: pointer; float: right; - - &:active{ - color: shade(@primary-color, 5%); - color: red; - } - &:hover{ - color: tint(@primary-color, 5%); - color: red; - } } &-close-text { cursor: pointer; float: right; + color: @legend-color; + &:active { + color: shade(@primary-color, 5%); + } + &:hover { + color: tint(@primary-color, 5%); + } } } @@ -139,12 +135,12 @@ .iconfont-size-under-12px(10px); } - &-title { + &-description { font-size: @input-font-size-lg; color: @text-color; } - &-message { + &-description { font-size: 12px; color: @legend-color; } @@ -153,15 +149,15 @@ border: 1px solid tint(@success-color, 50%); background-color: tint(@success-color, 90%); .anticon { - color: #87d068; + color: @success-color; } - .anticon.ant-alert-with-title-close-icon { + .anticon.ant-alert-with-message-close-icon { color: @legend-color; - &:active{ + &:active { color: shade(@primary-color, 5%); } - &:hover{ + &:hover { color: tint(@primary-color, 5%); } } @@ -171,15 +167,15 @@ border: 1px solid tint(@primary-color, 50%); background-color: tint(@primary-color, 90%); .anticon { - color: #3fc7fa; + color: @primary-color; } - .anticon.ant-alert-with-title-close-icon { + .anticon.ant-alert-with-message-close-icon { color: @legend-color; - &:active{ + &:active { color: shade(@primary-color, 5%); } - &:hover{ + &:hover { color: tint(@primary-color, 5%); } } @@ -189,15 +185,15 @@ border: 1px solid tint(@warning-color, 50%); background-color: tint(@warning-color, 90%); .anticon { - color: #fd9856; + color: @warning-color; } - .anticon.ant-alert-with-title-close-icon { + .anticon.ant-alert-with-message-close-icon { color: @legend-color; - &:active{ + &:active { color: shade(@primary-color, 5%); } - &:hover{ + &:hover { color: tint(@primary-color, 5%); } } @@ -207,15 +203,15 @@ border: 1px solid tint(@error-color, 50%); background-color: tint(@error-color, 90%); .anticon { - color: #ff6600; + color: @error-color; } - .anticon.ant-alert-with-title-close-icon { + .anticon.ant-alert-with-message-close-icon { color: @legend-color; - &:active{ + &:active { color: shade(@primary-color, 5%); } - &:hover{ + &:hover { color: tint(@primary-color, 5%); } } From 8a638a0c656531d128d42c4e4dd9502cb6f6329e Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 29 Jul 2015 11:13:02 +0800 Subject: [PATCH 14/34] update devDependencies --- package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 5c518ba453..1e9cb890bd 100644 --- a/package.json +++ b/package.json @@ -56,12 +56,12 @@ }, "devDependencies": { "autoprefixer-loader": "~2.0.0", - "babel": "~5.6.14", - "babel-core": "~5.4.7", - "babel-loader": "~5.1.3", + "babel": "^5.8.12", + "babel-core": "^5.8.12", + "babel-loader": "^5.3.2", "css-animation": "~1.0.3", "css-loader": "^0.14.1", - "eslint": "~0.22.1", + "eslint": "^0.24.1", "eslint-plugin-react": "~2.5.0", "extract-text-webpack-plugin": "^0.8.1", "gh-pages": "~0.3.1", From ee10b7c7d8a461e9c6603146121f6413c6315315 Mon Sep 17 00:00:00 2001 From: yiminghe Date: Wed, 29 Jul 2015 12:50:41 +0800 Subject: [PATCH 15/34] fix ant-select --- components/select/index.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/components/select/index.jsx b/components/select/index.jsx index fd5f5b862e..d54508a8a6 100644 --- a/components/select/index.jsx +++ b/components/select/index.jsx @@ -1,7 +1,7 @@ import React from 'react'; import Select from 'rc-select'; -export default React.createClass({ +var AntSelect = React.createClass({ getDefaultProps() { return { prefixCls: 'ant-select', @@ -16,3 +16,7 @@ export default React.createClass({ ); } }); + +AntSelect.Option = Select.Option; + +export default AntSelect; From 6f70303e904dd4acceba507869f2dabbe8eb2f42 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 29 Jul 2015 13:49:44 +0800 Subject: [PATCH 16/34] =?UTF-8?q?Fix=20table,=20=E5=BD=93=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E9=87=8F=E5=B0=91=E4=BA=8E=E6=AF=8F=E9=A1=B5=E6=95=B0?= =?UTF-8?q?=E9=87=8F=E6=97=B6=EF=BC=8C=E7=9B=B4=E6=8E=A5=E8=AE=BE=E7=BD=AE?= =?UTF-8?q?=E6=95=B0=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/table/index.jsx | 17 +++++++++++------ package.json | 2 +- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/components/table/index.jsx b/components/table/index.jsx index d30c5a826b..357d4b56fc 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -329,12 +329,17 @@ export default React.createClass({ }); } // 分页 - data = data.filter(function(item, i) { - if (i >= (current - 1) * pageSize && - i < current * pageSize) { - return item; - } - }); + // --- + // 当数据量少于每页数量时，直接设置数据 + // 否则进行读取分页数据 + if (data.length > pageSize || pageSize === Number.MAX_VALUE) { + data = data.filter(function(item, i) { + if (i >= (current - 1) * pageSize && + i < current * pageSize) { + return item; + } + }); + } // 完成数据 this.setState({ data: data diff --git a/package.json b/package.json index 1e9cb890bd..99073691b5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "0.7.3-beta4", + "version": "0.7.3-beta6", "stableVersion": "0.7.2", "title": "Ant Design", "description": "一个设计语言&前端框架", From a13b5d3b02d41bb6939254cc7284881072e10dfb Mon Sep 17 00:00:00 2001 From: jljsj Date: Wed, 29 Jul 2015 14:50:00 +0800 Subject: [PATCH 17/34] updata js 0.1.3 and md --- components/enter-animation/demo/basic.md | 2 +- components/enter-animation/index.md | 5 ++++- package.json | 2 +- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/components/enter-animation/demo/basic.md b/components/enter-animation/demo/basic.md index a5ad91d912..0af8cd4dd7 100644 --- a/components/enter-animation/demo/basic.md +++ b/components/enter-animation/demo/basic.md @@ -2,7 +2,7 @@ - order: 0 -默认子节点进场动画。`EnterAnimation` 里延时 1 秒，递增 `interval` 为 0.2。 +默认子节点进场动画。为避免与本站页面的进场冲突，所以 `EnterAnimation` 里延时 1 秒，递增 `interval` 为 0.3。 --- diff --git a/components/enter-animation/index.md b/components/enter-animation/index.md index 981f1d2a9a..27814124cd 100644 --- a/components/enter-animation/index.md +++ b/components/enter-animation/index.md @@ -7,7 +7,9 @@ --- -页面进场离场的动画。 +页面进场离场的动画，组件主要帮你完成 transition 的一些烦锁的配置，你只要在 enter-data 里写入样式或自带的 type 就可以完成一系例的动画。 + +注：由于 CSS3 的 transition 来执行动画，所以`ie9` 以及更早的版本不支持 `EnterAnimation` ## 何时使用 @@ -35,6 +37,7 @@
依次进场
依次进场，并修改动画效果
+
依次进场，并使用样式修改动画效果
没有动画
``` diff --git a/package.json b/package.json index 6a67e2db91..9b167b0153 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ ], "license": "MIT", "dependencies": { - "enter-animation": "~0.1.2", + "enter-animation": "~0.1.3", "gregorian-calendar": "~3.0.0", "gregorian-calendar-format": "~3.0.1", "object-assign": "~3.0.0", From 9fc8e7bb886eb50acc91e1c2373564b1eb592283 Mon Sep 17 00:00:00 2001 From: jljsj Date: Wed, 29 Jul 2015 14:53:02 +0800 Subject: [PATCH 18/34] updata enter-animaiton index.md --- components/enter-animation/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/enter-animation/index.md b/components/enter-animation/index.md index 27814124cd..de921549f6 100644 --- a/components/enter-animation/index.md +++ b/components/enter-animation/index.md @@ -9,7 +9,7 @@ 页面进场离场的动画，组件主要帮你完成 transition 的一些烦锁的配置，你只要在 enter-data 里写入样式或自带的 type 就可以完成一系例的动画。 -注：由于 CSS3 的 transition 来执行动画，所以`ie9` 以及更早的版本不支持 `EnterAnimation` +注：由于动画是由 CSS3 的 transition 来执行的，所以`ie9` 以及更早的版本不支持 `EnterAnimation` ## 何时使用 From d32b9bfeacc6e57a66f01ff324d2359948b2af56 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 29 Jul 2015 15:02:19 +0800 Subject: [PATCH 19/34] =?UTF-8?q?=E4=BF=AE=E6=94=B9=20enter-animation=20?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/enter-animation/index.md | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/components/enter-animation/index.md b/components/enter-animation/index.md index de921549f6..5ed1928f86 100644 --- a/components/enter-animation/index.md +++ b/components/enter-animation/index.md @@ -7,9 +7,7 @@ --- -页面进场离场的动画，组件主要帮你完成 transition 的一些烦锁的配置，你只要在 enter-data 里写入样式或自带的 type 就可以完成一系例的动画。 - -注：由于动画是由 CSS3 的 transition 来执行的，所以`ie9` 以及更早的版本不支持 `EnterAnimation` +通过简单的配置对一组元素添加串行的进场动画效果。 ## 何时使用 @@ -17,7 +15,10 @@ - 小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，使页面转场更加流畅和舒适，提高整体视觉效果和产品的质感。 -## API + +## 如何使用 + +一级子元素依次进场。 ```jsx @@ -28,6 +29,8 @@ ``` +如子节点有 `enter-data` 值，则只执行有 `enter-data` 的节点的动画，相反所有子节点上都没有 `enter-data` 值，则执行遍历dom下一级节点来执行动画。 + ```jsx
@@ -42,8 +45,8 @@ ``` -如子节点有 `enter-data` 值，则只执行有 `enter-data` 的节点的动画，相反所有子节点上都没有 `enter-data` 值，则执行遍历dom下一级节点来执行动画。 +## API ### @@ -72,6 +75,8 @@ |delay |number |0 |动画的延时，依照结构递增以上的 `interval`| |queueId |number |0 |动画的线程| +> 由于使用了 CSS3 动画，所以 `IE9` 及更早的版本将没有进场效果。 + diff --git a/components/motion/index.md b/components/motion/index.md index cf5c252529..5e90be5129 100644 --- a/components/motion/index.md +++ b/components/motion/index.md @@ -1,13 +1,15 @@ # Motion -- category: CSS -- chinese: 组件动画 -- order: 4 -- cols: 1 +- order: 1 +- nodemos: true --- -## 组件的动画 +Ant Design 提供了一些预设的组件动画展现和缓动函数。 + +
+ +## 组件动画 通过设置组件的 `transitionName` 指定组件动画。 @@ -38,3 +40,220 @@ |@ease-out-circ | `cubic-bezier(0.08, 0.82, 0.17, 1);` |圆形后缓动；适合元素展开时； | |@ease-in-circ | `cubic-bezier(0.6, 0.04, 0.98, 0.34);` |圆形前缓动；适合元素关闭时； | |@ease-in-out-circ | `cubic-bezier(0.78, 0.14, 0.15, 0.86);` |圆形缓动；适合元素移动； | + + +`````jsx +var cssAnimation = require('css-animation'); +var motions = []; +motions = motions.concat([[{ + name: '淡入', + value: 'fade', + direction: 'enter', + type: '渐隐' +}, { + name: '淡出', + value: 'fade', + direction: 'leave', + type: '渐隐' +}]]); +motions = motions.concat([[{ + name: '中心放大', + value: 'zoom', + direction: 'enter', + type: '缩放' +}, { + name: '中心缩小', + value: 'zoom', + direction: 'leave', + type: '缩放' +}, { + name: '上方放大', + value: 'zoom-up', + direction: 'enter', + type: '缩放' +}, { + name: '上方缩小', + value: 'zoom-up', + direction: 'leave', + type: '缩放' +}, { + name: '下方放大', + value: 'zoom-down', + direction: 'enter', + type: '缩放' +}, { + name: '下方缩小', + value: 'zoom-down', + direction: 'leave', + type: '缩放' +}, { + name: '左方放大', + value: 'zoom-left', + direction: 'enter', + type: '缩放' +}, { + name: '左方缩小', + value: 'zoom-left', + direction: 'leave', + type: '缩放' +}, { + name: '右方放大', + value: 'zoom-right', + direction: 'enter', + type: '缩放' +}, { + name: '右方缩小', + value: 'zoom-right', + direction: 'leave', + type: '缩放' +}]]); +motions = motions.concat([[{ + name: '上方滑入', + value: 'move-up', + direction: 'enter', + type: '移动' +}, { + name: '上方滑出', + value: 'move-up', + direction: 'leave', + type: '移动' +}, { + name: '下方滑入', + value: 'move-down', + direction: 'enter', + type: '移动' +}, { + name: '下方滑出', + value: 'move-down', + direction: 'leave', + type: '移动' +}, { + name: '左方滑入', + value: 'move-left', + direction: 'enter', + type: '移动' +}, { + name: '左方滑出', + value: 'move-left', + direction: 'leave', + type: '移动' +}, { + name: '右方滑入', + value: 'move-right', + direction: 'enter', + type: '移动' +}, { + name: '右方滑入', + value: 'move-right', + direction: 'leave', + type: '移动' +}]]); +motions = motions.concat([[{ + name: '上方展开', + value: 'slide-up', + direction: 'enter', + type: '伸缩' +}, { + name: '上方缩回', + value: 'slide-up', + direction: 'leave', + type: '伸缩' +}, { + name: '下方展开', + value: 'slide-down', + direction: 'enter', + type: '伸缩' +}, { + name: '下方缩回', + value: 'slide-down', + direction: 'leave', + type: '伸缩' +}, { + name: '左方展开', + value: 'slide-left', + direction: 'enter', + type: '伸缩' +}, { + name: '左方缩回', + value: 'slide-left', + direction: 'leave', + type: '伸缩' +}, { + name: '右方展开', + value: 'slide-right', + direction: 'enter', + type: '伸缩' +}, { + name: '右方缩回', + value: 'slide-right', + direction: 'leave', + type: '伸缩' +}]]); +motions = motions.concat([[{ + name: '摇摆', + value: 'swing', + direction: 'enter', + type: '其他' +}]]); +var leave='-leave'; +var Test = React.createClass({ + handleChange(e) { + var value = e.target.value; + if(value){ + this.demoNode.style.visibility=''; + cssAnimation(this.demoNode, value, () => { + if(value.slice(-leave.length)===leave){ + this.demoNode.style.visibility='hidden'; + } + }); + } + }, + + componentDidMount() { + this.demoNode = React.findDOMNode(this.refs.demo); + }, + + render() { + var options = [].concat(motions.map(function (m) { + var opts = m.map(function (m2) { + return + }); + return {opts}; + })); + return
+
+
栗子
+
+
+ +
+
; + } +}); + +React.render(, document.getElementById('components-motion-demo-basic')); +````` + + diff --git a/design/responsive.md b/design/responsive.md deleted file mode 100644 index afe9d2f8a3..0000000000 --- a/design/responsive.md +++ /dev/null @@ -1,104 +0,0 @@ -# 响应交互 - -- category: 动画 -- order: 1 - ---- - -响应交互一般是指我们在浏览页面时，点击元素时动画给我们视觉上的反馈，每个交互动效都能给我们带来不同视觉效果。 - -如搜索框，当你点击准备输入时，icon将会跑到右边方便点击，当然你按回车也是可以提交表单的；在你没有输入文字时，icon又会恢愎到原来的地置，但当你输入了文字后，icon将会停留在右边； - -### 按钮类表面效果 - -按钮上的hover或click效果，随着你的鼠标事件而改变自身或增加元素在按钮上； - -以下按钮对组件按钮的修改，只做示例，具体还需看组件； - - -
-
-

1.按钮表面效果；

-
-我是按钮 - -点击涟漪按钮 - - -点击涟漪按钮 - - -
-
-
-

2.无素结合切换;

-
- - -
-
-
- -### 元素类呈现效果 - -元素呈现指点击或滑过展现相关的内容或提示，如下拉菜单或弹出框等； - -注：物体弹出点要从点击点出现，不要做凭空出现； - - -
- -
-

1.icon菜单(点放大模式)

-
- - - - -
-
- -
-

2.下拉菜单(下滑模式)

-
- - -
- -
-
-
    -
  • 第一排文字元素
    • -
  • 第二排文字元素
    • -
  • 第三排文字元素
    • -
  • 第四排文字元素
    • -
-
-
-
- - -
-
- -
diff --git a/site/templates/layout.html b/site/templates/layout.html index d22631310b..416f7812f8 100644 --- a/site/templates/layout.html +++ b/site/templates/layout.html @@ -96,7 +96,7 @@ 使用
  • - 设计 + 设计
  • 组件 diff --git a/site/theme.js b/site/theme.js index c3d3077711..24c6b01a53 100644 --- a/site/theme.js +++ b/site/theme.js @@ -58,7 +58,10 @@ module.exports = function(nico) { } })).filter(function(n){ return n != undefined }); categories = categories.sort(function(a, b) { - return a.length - b.length; + var cats = ['文字', '色彩', '动画']; + a = cats.indexOf(a); + b = cats.indexOf(b); + return a - b; }) Categories[rootDirectory] = categories; return categories; diff --git a/spec/color.md b/spec/color.md new file mode 100644 index 0000000000..cee8d5349b --- /dev/null +++ b/spec/color.md @@ -0,0 +1,6 @@ +# 色系和交互 + +- category: 色彩 +- order: 0 + +--- diff --git a/design/natural-motion.md b/spec/easing.md similarity index 76% rename from design/natural-motion.md rename to spec/easing.md index 29f0dd32a4..2706de7a4f 100644 --- a/design/natural-motion.md +++ b/spec/easing.md @@ -1,7 +1,7 @@ -# 自然运动 +# 缓动函数 - category: 动画 -- order: 0 +- order: 1 --- @@ -21,6 +21,7 @@ 动画停止与启动都不是瞬间完成的，因它需要一段缓冲的时间来加速或减速，因此，当动画有突然启动，停止或改变方向，都会显得很不自然。 #### 自然缓动 + 不要用直线缓动Linear做物体出入动画的缓动；注：Linear函数可做循环动画函数； 如下图所示，在没有缓动的情况下启动与停止都显得突兀，感觉动画还没结束就停止了，所以在物体运动中避免直线运动； @@ -39,9 +40,8 @@ new Motion("#J-Linear",{lineData:[{open:[],end:[],stroke:"#f2666c"},{open:[0.455 上图所示缓动函数：红：Linear 蓝：easeInOutQuad； - - #### 出入动画 + 不要做单向动画，进场后不做出场，直接消失元素或回到原点，会让整个画面不协调,反相只出不进也一样； 所以有动画的进场必须要有动画的出场，包括导航上的动画； @@ -61,9 +61,8 @@ mask:false,exposure:"top"}); 上图所示缓动函数：红：easeInOutQuad 蓝：easeInOutCubic； - - ##### 场外出入 + 场外出入需要考虑力量与引力的关系，如向空中抛物体时，开始时力量大于引力时，速度是最快的， 到达一定高度后，随着力量的减少，速度也跟随着降低，物体达到最高点后，力量等于引力或小于引力时，物体随之下降； @@ -110,3 +109,20 @@ mask:false,exposure:"top"}); 上图所示缓动函数：红：easeOutBounce,easeInOutQuad 蓝：easeOutBack,easeInBack； + + +## 缓动函数 + +Ant Design 提供了一套缓动函数规范动画行为。 + +|名称 |参数 |说明与适用 | +|-------------------|------------------------------------------|---------------------------| +|@ease-out | `cubic-bezier(0.215, 0.61, 0.355, 1);` |默认后缓动；适合元素展开时； | +|@ease-in | `cubic-bezier(0.55, 0.055, 0.675, 0.19);`|默认前缓动；适合元素关闭时； | +|@ease-in-out | `cubic-bezier(0.645, 0.045, 0.355, 1);` |默认前后缓动；适合元素移动； | +|@ease-out-back | `cubic-bezier(0.18, 0.89, 0.32, 1.28);` |结束回动；适合弹出框出现时； | +|@ease-in-back | `cubic-bezier(0.6, -0.3, 0.74, 0.05);` |开始回动；适合弹出框关闭； | +|@ease-in-out-back | `cubic-bezier(0.68, -0.55, 0.27, 1.55);` |前后回动； | +|@ease-out-circ | `cubic-bezier(0.08, 0.82, 0.17, 1);` |圆形后缓动；适合元素展开时； | +|@ease-in-circ | `cubic-bezier(0.6, 0.04, 0.98, 0.34);` |圆形前缓动；适合元素关闭时； | +|@ease-in-out-circ | `cubic-bezier(0.78, 0.14, 0.15, 0.86);` |圆形缓动；适合元素移动； | diff --git a/spec/font.md b/spec/font.md new file mode 100644 index 0000000000..a0b8fa2d09 --- /dev/null +++ b/spec/font.md @@ -0,0 +1,7 @@ +# 字体 + +- category: 文字 +- order: 0 + +--- + diff --git a/spec/motion.md b/spec/motion.md new file mode 100644 index 0000000000..1cbe4e33ee --- /dev/null +++ b/spec/motion.md @@ -0,0 +1,244 @@ +# 组件动画 + +- category: 动画 +- order: 0 + +--- + +Ant Design 提供了一些预设的组件动画样式。 + +
    + +## 组件动画 + +通过设置组件的 `transitionName` 指定组件动画。 + +| 组件 | 中文名 | 采用动画 | +|--------------|---------------------|-------------------------------------------------| +| popover | 气泡浮出层 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` | +| popconfirm | 气泡确认框 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` | +| tooltip | 文字提示框 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` | +| modal | 弹出框 | `zoom` | +| confirm | 弹出确认框 | `zoom` | +| message | 信息提示条 | `move-up` | +| dropdown | 下拉菜单 | `slide-up` | +| select | 选择框 | `slide-up` | +| datepicker | 日期选择框 | `slide-up` | + + +`````jsx +var cssAnimation = require('css-animation'); +var motions = []; +motions = motions.concat([[{ + name: '淡入', + value: 'fade', + direction: 'enter', + type: '渐隐' +}, { + name: '淡出', + value: 'fade', + direction: 'leave', + type: '渐隐' +}]]); +motions = motions.concat([[{ + name: '中心放大', + value: 'zoom', + direction: 'enter', + type: '缩放' +}, { + name: '中心缩小', + value: 'zoom', + direction: 'leave', + type: '缩放' +}, { + name: '上方放大', + value: 'zoom-up', + direction: 'enter', + type: '缩放' +}, { + name: '上方缩小', + value: 'zoom-up', + direction: 'leave', + type: '缩放' +}, { + name: '下方放大', + value: 'zoom-down', + direction: 'enter', + type: '缩放' +}, { + name: '下方缩小', + value: 'zoom-down', + direction: 'leave', + type: '缩放' +}, { + name: '左方放大', + value: 'zoom-left', + direction: 'enter', + type: '缩放' +}, { + name: '左方缩小', + value: 'zoom-left', + direction: 'leave', + type: '缩放' +}, { + name: '右方放大', + value: 'zoom-right', + direction: 'enter', + type: '缩放' +}, { + name: '右方缩小', + value: 'zoom-right', + direction: 'leave', + type: '缩放' +}]]); +motions = motions.concat([[{ + name: '上方滑入', + value: 'move-up', + direction: 'enter', + type: '移动' +}, { + name: '上方滑出', + value: 'move-up', + direction: 'leave', + type: '移动' +}, { + name: '下方滑入', + value: 'move-down', + direction: 'enter', + type: '移动' +}, { + name: '下方滑出', + value: 'move-down', + direction: 'leave', + type: '移动' +}, { + name: '左方滑入', + value: 'move-left', + direction: 'enter', + type: '移动' +}, { + name: '左方滑出', + value: 'move-left', + direction: 'leave', + type: '移动' +}, { + name: '右方滑入', + value: 'move-right', + direction: 'enter', + type: '移动' +}, { + name: '右方滑入', + value: 'move-right', + direction: 'leave', + type: '移动' +}]]); +motions = motions.concat([[{ + name: '上方展开', + value: 'slide-up', + direction: 'enter', + type: '伸缩' +}, { + name: '上方缩回', + value: 'slide-up', + direction: 'leave', + type: '伸缩' +}, { + name: '下方展开', + value: 'slide-down', + direction: 'enter', + type: '伸缩' +}, { + name: '下方缩回', + value: 'slide-down', + direction: 'leave', + type: '伸缩' +}, { + name: '左方展开', + value: 'slide-left', + direction: 'enter', + type: '伸缩' +}, { + name: '左方缩回', + value: 'slide-left', + direction: 'leave', + type: '伸缩' +}, { + name: '右方展开', + value: 'slide-right', + direction: 'enter', + type: '伸缩' +}, { + name: '右方缩回', + value: 'slide-right', + direction: 'leave', + type: '伸缩' +}]]); +motions = motions.concat([[{ + name: '摇摆', + value: 'swing', + direction: 'enter', + type: '其他' +}]]); +var leave='-leave'; +var Test = React.createClass({ + handleChange(e) { + var value = e.target.value; + if(value){ + this.demoNode.style.visibility=''; + cssAnimation(this.demoNode, value, () => { + if(value.slice(-leave.length)===leave){ + this.demoNode.style.visibility='hidden'; + } + }); + } + }, + + componentDidMount() { + this.demoNode = React.findDOMNode(this.refs.demo); + }, + + render() { + var options = [].concat(motions.map(function (m) { + var opts = m.map(function (m2) { + return + }); + return {opts}; + })); + return
    +
    +
    栗子
    +
    +
    + +
    +
    ; + } +}); + +React.render(, document.getElementById('components-motion-demo-basic')); +````` + + + diff --git a/design/page-transition.md b/spec/page-transition.md similarity index 93% rename from design/page-transition.md rename to spec/page-transition.md index 4e03e32e6a..2c7305199a 100644 --- a/design/page-transition.md +++ b/spec/page-transition.md @@ -1,18 +1,17 @@ -# 页面转换 +# 转场动画 - category: 动画 -- chinese: 页面转换 -- order: 2 +- order: 1 --- -###单页面转场动画 +### 单页面转场动画 从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。 -####视觉连贯性 +#### 视觉连贯性 -####三类元素（Adding ,Receding,Normal) +#### 三类元素（Adding, Receding, Normal） Adding:  新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。 @@ -53,7 +52,7 @@ Normal: 指那些从转场开始到结束都没有发生变化的信息元素
    • -####弹出框动效 +#### 弹出框动效 从一个触发点触发一个弹出框时，弹框从所触发区域弹出，且触发区域视觉上基本保持不变。这样让触发区域和弹出区域有所关联，提高用户对新内容的认知。 diff --git a/spec/typography.md b/spec/typography.md new file mode 100644 index 0000000000..51286993d4 --- /dev/null +++ b/spec/typography.md @@ -0,0 +1,6 @@ +# 排版 + +- category: 文字 +- order: 1 + +--- From a671778b032c1f3e5cc989b087e79d21fd4aa542 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 29 Jul 2015 17:24:38 +0800 Subject: [PATCH 26/34] fix page height --- static/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/static/style.css b/static/style.css index d5042ddec8..16551f50bd 100644 --- a/static/style.css +++ b/static/style.css @@ -477,6 +477,7 @@ footer ul li > a { -webkit-animation: xRightMatrix .5s ease-out; animation: xRightMatrix .5s ease-out; background: #fff; + min-height: 500px; } .main-container-center { From e2d8ad16cd8269d4134b8d2e1c42c43bd510d5a8 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 29 Jul 2015 17:25:45 +0800 Subject: [PATCH 27/34] fix header nav highlight --- site/templates/layout.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/templates/layout.html b/site/templates/layout.html index 416f7812f8..60276c01a2 100644 --- a/site/templates/layout.html +++ b/site/templates/layout.html @@ -95,7 +95,7 @@
  • 使用
    • -
  • +
  • 设计
  • From a45bcd4d075194f2e6e23059074b184d1f102cdf Mon Sep 17 00:00:00 2001 From: zhujun24 Date: Wed, 29 Jul 2015 17:33:28 +0800 Subject: [PATCH 28/34] fixed closable introduce in index.md --- components/alert/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/alert/index.md b/components/alert/index.md index 12067e1309..4de86d8726 100644 --- a/components/alert/index.md +++ b/components/alert/index.md @@ -16,7 +16,7 @@ | 参数 | 说明 | 类型 | 默认值 | |----------- |--------------------------------------------------------- | ---------- |-------| | type | 必选参数，指定警告提示的样式，有四种选择`success`、`info`、`warn`、`error` | String | 无 | -| closable | 可选参数，是否显示关闭按钮 | Boolean | false | +| closable | 可选参数，值为字符串`true`时显示关闭按钮，默认不显示 | String | 无 | | closeText | 可选参数，自定义关闭 | String | 无 | | message | 必选参数，警告提示内容 | String | 无 | | description | 可选参数，警告提示的辅助性文字介绍 | String | 无 | From 612015bfbb25ffafc7b88c7020c45b6da0ff53f9 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 29 Jul 2015 17:35:24 +0800 Subject: [PATCH 29/34] update doc style --- spec/easing.md | 77 ++++++++++++++++++++--------------------- spec/page-transition.md | 31 +++++++---------- 2 files changed, 51 insertions(+), 57 deletions(-) diff --git a/spec/easing.md b/spec/easing.md index 2706de7a4f..034f91a0e3 100644 --- a/spec/easing.md +++ b/spec/easing.md @@ -22,9 +22,9 @@ #### 自然缓动 -不要用直线缓动Linear做物体出入动画的缓动；注：Linear函数可做循环动画函数； +不要用直线缓动Linear做物体出入动画的缓动；注：Linear函数可做循环动画函数。 -如下图所示，在没有缓动的情况下启动与停止都显得突兀，感觉动画还没结束就停止了，所以在物体运动中避免直线运动； +如下图所示，在没有缓动的情况下启动与停止都显得突兀，感觉动画还没结束就停止了，所以在物体运动中避免直线运动。 @@ -33,32 +33,32 @@ -上图所示缓动函数：红：Linear 蓝：easeInOutQuad； +上图所示缓动函数：红 `Linear`，蓝 `easeInOutQuad`。 #### 出入动画 -不要做单向动画，进场后不做出场，直接消失元素或回到原点，会让整个画面不协调,反相只出不进也一样； +不要做单向动画，进场后不做出场，直接消失元素或回到原点，会让整个画面不协调，反相只出不进也一样。 -所以有动画的进场必须要有动画的出场，包括导航上的动画； +所以有动画的进场必须要有动画的出场，包括导航上的动画。
    -上图所示缓动函数：红：easeInOutQuad 蓝：easeInOutCubic； +上图所示缓动函数：红 `easeInOutQuad`，蓝 `easeInOutCubic`。 ##### 场外出入 @@ -74,41 +74,40 @@ mask:false,exposure:"top"}); -上图所示缓动函数：红：easeOutQuad,easeOutQuad 蓝：easeOutCubic,easeInCubic； +上图所示缓动函数：红 `easeOutQuad` `easeOutQuad`，蓝 `easeOutCubic` `easeInCubic`。 -示例组件：Message全局提示,Dropdown下拉菜单 +示例组件：[Message 全局提示](/components/message/)，[Dropdown 下拉菜单](/components/dropdown/)。 #### 弹性动画 -1.如蹦极跳下来时，刚跳下时速度很快，到达绳子的长度后，由于物体的重量再将绳子拉长再反弹,弹动几次后才停下。 +1. 如蹦极跳下来时，刚跳下时速度很快，到达绳子的长度后，由于物体的重量再将绳子拉长再反弹，弹动几次后才停下。 - 动画里也由质量来决定它的反弹，一般元素最好只弹动一次就够了，收回时可以用向下浮动再上拉或直接前缓动，可适用在下拉框与弹出元素; + 动画里也由质量来决定它的反弹，一般元素最好只弹动一次就够了，收回时可以用向下浮动再上拉或直接前缓动，可适用在下拉框与弹出元素。 -2.如球类物体掉地上的后，反弹几次后停止; +2. 如球类物体掉地上的后，反弹几次后停止。 -注: -1.曲线图用的是3次贝塞尔曲线，没法表示Bounce，所以用line替换; -2.弹性动画最好结合alpha; -
    -
    + - 曲线图用的是3次贝塞尔曲线，没法表示Bounce，所以用line替换。 + - 弹性动画最好结合alpha。 + +
    -上图所示缓动函数：红：easeOutBounce,easeInOutQuad 蓝：easeOutBack,easeInBack； +上图所示缓动函数：红 `easeOutBounce` `easeInOutQuad`，蓝 `easeOutBack` `easeInBack`。 ## 缓动函数 @@ -117,12 +116,12 @@ Ant Design 提供了一套缓动函数规范动画行为。 |名称 |参数 |说明与适用 | |-------------------|------------------------------------------|---------------------------| -|@ease-out | `cubic-bezier(0.215, 0.61, 0.355, 1);` |默认后缓动；适合元素展开时； | -|@ease-in | `cubic-bezier(0.55, 0.055, 0.675, 0.19);`|默认前缓动；适合元素关闭时； | -|@ease-in-out | `cubic-bezier(0.645, 0.045, 0.355, 1);` |默认前后缓动；适合元素移动； | -|@ease-out-back | `cubic-bezier(0.18, 0.89, 0.32, 1.28);` |结束回动；适合弹出框出现时； | -|@ease-in-back | `cubic-bezier(0.6, -0.3, 0.74, 0.05);` |开始回动；适合弹出框关闭； | -|@ease-in-out-back | `cubic-bezier(0.68, -0.55, 0.27, 1.55);` |前后回动； | -|@ease-out-circ | `cubic-bezier(0.08, 0.82, 0.17, 1);` |圆形后缓动；适合元素展开时； | -|@ease-in-circ | `cubic-bezier(0.6, 0.04, 0.98, 0.34);` |圆形前缓动；适合元素关闭时； | -|@ease-in-out-circ | `cubic-bezier(0.78, 0.14, 0.15, 0.86);` |圆形缓动；适合元素移动； | +|@ease-out | `cubic-bezier(0.215， 0.61， 0.355， 1);` |默认后缓动；适合元素展开时； | +|@ease-in | `cubic-bezier(0.55， 0.055， 0.675， 0.19);`|默认前缓动；适合元素关闭时； | +|@ease-in-out | `cubic-bezier(0.645， 0.045， 0.355， 1);` |默认前后缓动；适合元素移动； | +|@ease-out-back | `cubic-bezier(0.18， 0.89， 0.32， 1.28);` |结束回动；适合弹出框出现时； | +|@ease-in-back | `cubic-bezier(0.6， -0.3， 0.74， 0.05);` |开始回动；适合弹出框关闭； | +|@ease-in-out-back | `cubic-bezier(0.68， -0.55， 0.27， 1.55);` |前后回动； | +|@ease-out-circ | `cubic-bezier(0.08， 0.82， 0.17， 1);` |圆形后缓动；适合元素展开时； | +|@ease-in-circ | `cubic-bezier(0.6， 0.04， 0.98， 0.34);` |圆形前缓动；适合元素关闭时； | +|@ease-in-out-circ | `cubic-bezier(0.78， 0.14， 0.15， 0.86);` |圆形缓动；适合元素移动； | diff --git a/spec/page-transition.md b/spec/page-transition.md index 2c7305199a..9622dbb4f0 100644 --- a/spec/page-transition.md +++ b/spec/page-transition.md @@ -9,34 +9,32 @@ 从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。 -#### 视觉连贯性 +### 视觉连贯性三元素 -#### 三类元素（Adding, Receding, Normal） +- Adding:  新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。 -Adding:  新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。 +- Receding:  与当前页无关的信息元素应采用适当方式移除。 -Receding:  与当前页无关的信息元素应采用适当方式移除 - -Normal: 指那些从转场开始到结束都没有发生变化的信息元素 +- Normal: 指那些从转场开始到结束都没有发生变化的信息元素。 +### 转场动画 -#### 转场动画 +大页面转场可采用左出右入的形式。 -大页面转场可采用左出右入的形式 +小的信息元素排布或块状较多的情况下，最好根据一定的路径层次依次进场，区分维度层级，来凸显量级，间隔时间为动画时间的三分之一。 -小的信息元素排布或块状较多的情况下，最好根据一定的路径层次依次进场，区分维度层级，来凸显量级，间隔时间为动画时间的三分之一； +如不是单页面，页面动画可以为只右入和间隔性出现。 -如不是单页面，页面动画可以为只右入和间隔性出现；
    - +
    -####可折叠面板 +### 可折叠面板 对于信息元素内容区域的延伸，显示信息元素和进一步内容对象之间的直接连接。 @@ -44,19 +42,16 @@ Normal: 指那些从转场开始到结束都没有发生变化的信息元素 2.信息元素在收起时照收齐点移动，在视觉上跟随关闭物体。 - -
    - +
    -#### 弹出框动效 - +### 弹出框动效 从一个触发点触发一个弹出框时，弹框从所触发区域弹出，且触发区域视觉上基本保持不变。这样让触发区域和弹出区域有所关联，提高用户对新内容的认知。
    - +
    From 28863a263c018829bac66a5dc9f228d999605832 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 29 Jul 2015 18:09:29 +0800 Subject: [PATCH 30/34] fix easing.md --- spec/easing.md | 50 ++++++++++++++++++++++++-------------------------- 1 file changed, 24 insertions(+), 26 deletions(-) diff --git a/spec/easing.md b/spec/easing.md index 034f91a0e3..156de98643 100644 --- a/spec/easing.md +++ b/spec/easing.md @@ -28,15 +28,15 @@ -
    -
    +
    + 上图所示缓动函数：红 `Linear`，蓝 `easeInOutQuad`。 @@ -46,15 +46,14 @@ new Motion("#J-Linear"，{lineData:[{open:[]，end:[]，stroke:"#f2666c"}，{ope 所以有动画的进场必须要有动画的出场，包括导航上的动画。 -
    -
    +
    @@ -69,14 +68,13 @@ mask:false，exposure:"top"}); 所以在快到达最高点和掉下来时有一定缓冲带；不要做图示红色球体下降时的缓动； -
    -
    +
    @@ -100,10 +98,10 @@ mask:true，exposure:"bottom"}); @@ -116,12 +114,12 @@ Ant Design 提供了一套缓动函数规范动画行为。 |名称 |参数 |说明与适用 | |-------------------|------------------------------------------|---------------------------| -|@ease-out | `cubic-bezier(0.215， 0.61， 0.355， 1);` |默认后缓动；适合元素展开时； | -|@ease-in | `cubic-bezier(0.55， 0.055， 0.675， 0.19);`|默认前缓动；适合元素关闭时； | -|@ease-in-out | `cubic-bezier(0.645， 0.045， 0.355， 1);` |默认前后缓动；适合元素移动； | -|@ease-out-back | `cubic-bezier(0.18， 0.89， 0.32， 1.28);` |结束回动；适合弹出框出现时； | -|@ease-in-back | `cubic-bezier(0.6， -0.3， 0.74， 0.05);` |开始回动；适合弹出框关闭； | -|@ease-in-out-back | `cubic-bezier(0.68， -0.55， 0.27， 1.55);` |前后回动； | -|@ease-out-circ | `cubic-bezier(0.08， 0.82， 0.17， 1);` |圆形后缓动；适合元素展开时； | -|@ease-in-circ | `cubic-bezier(0.6， 0.04， 0.98， 0.34);` |圆形前缓动；适合元素关闭时； | -|@ease-in-out-circ | `cubic-bezier(0.78， 0.14， 0.15， 0.86);` |圆形缓动；适合元素移动； | +|@ease-out | `cubic-bezier(0.215,0.61,0.355,1);` |默认后缓动；适合元素展开时； | +|@ease-in | `cubic-bezier(0.55,0.055,0.675,0.19);`|默认前缓动；适合元素关闭时； | +|@ease-in-out | `cubic-bezier(0.645,0.045,0.355,1);` |默认前后缓动；适合元素移动； | +|@ease-out-back | `cubic-bezier(0.18,0.89,0.32,1.28);` |结束回动；适合弹出框出现时； | +|@ease-in-back | `cubic-bezier(0.6,-0.3,0.74,0.05);` |开始回动；适合弹出框关闭； | +|@ease-in-out-back | `cubic-bezier(0.68,-0.55,0.27,1.55);` |前后回动； | +|@ease-out-circ | `cubic-bezier(0.08,0.82,0.17,1);` |圆形后缓动；适合元素展开时； | +|@ease-in-circ | `cubic-bezier(0.6,0.04,0.98,0.34);` |圆形前缓动；适合元素关闭时； | +|@ease-in-out-circ | `cubic-bezier(0.78,0.14,0.15,0.86);` |圆形缓动；适合元素移动； | From ee71eb88a87d7dbb1eb429daf5bdc11ef77b8e79 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 29 Jul 2015 18:28:35 +0800 Subject: [PATCH 31/34] rm motion from components --- components/motion/demo/basic.md | 9 -- components/motion/index.md | 259 -------------------------------- static/motion.js | 4 +- 3 files changed, 2 insertions(+), 270 deletions(-) delete mode 100644 components/motion/demo/basic.md delete mode 100644 components/motion/index.md diff --git a/components/motion/demo/basic.md b/components/motion/demo/basic.md deleted file mode 100644 index ccf63afd36..0000000000 --- a/components/motion/demo/basic.md +++ /dev/null @@ -1,9 +0,0 @@ -# 基本 - -- order: 0 - -动画效果示例。 - ---- - - diff --git a/components/motion/index.md b/components/motion/index.md deleted file mode 100644 index 5e90be5129..0000000000 --- a/components/motion/index.md +++ /dev/null @@ -1,259 +0,0 @@ -# Motion - -- order: 1 -- nodemos: true - ---- - -Ant Design 提供了一些预设的组件动画展现和缓动函数。 - -
    - -## 组件动画 - -通过设置组件的 `transitionName` 指定组件动画。 - -| 组件 | 中文名 | 采用动画 | -|--------------|---------------------|-------------------------------------------------| -| popover | 气泡浮出层 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` | -| popconfirm | 气泡确认框 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` | -| tooltip | 文字提示框 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` | -| modal | 弹出框 | `zoom` | -| confirm | 弹出确认框 | `zoom` | -| message | 信息提示条 | `move-up` | -| dropdown | 下拉菜单 | `slide-up` | -| select | 选择框 | `slide-up` | -| datepicker | 日期选择框 | `slide-up` | - -## 缓动函数 - -在以上组件的动画不适合时，请用以下缓动。 - -|名称 |参数 |说明与适用 | -|-------------------|------------------------------------------|---------------------------| -|@ease-out | `cubic-bezier(0.215, 0.61, 0.355, 1);` |默认后缓动；适合元素展开时； | -|@ease-in | `cubic-bezier(0.55, 0.055, 0.675, 0.19);`|默认前缓动；适合元素关闭时； | -|@ease-in-out | `cubic-bezier(0.645, 0.045, 0.355, 1);` |默认前后缓动；适合元素移动； | -|@ease-out-back | `cubic-bezier(0.18, 0.89, 0.32, 1.28);` |结束回动；适合弹出框出现时； | -|@ease-in-back | `cubic-bezier(0.6, -0.3, 0.74, 0.05);` |开始回动；适合弹出框关闭； | -|@ease-in-out-back | `cubic-bezier(0.68, -0.55, 0.27, 1.55);` |前后回动； | -|@ease-out-circ | `cubic-bezier(0.08, 0.82, 0.17, 1);` |圆形后缓动；适合元素展开时； | -|@ease-in-circ | `cubic-bezier(0.6, 0.04, 0.98, 0.34);` |圆形前缓动；适合元素关闭时； | -|@ease-in-out-circ | `cubic-bezier(0.78, 0.14, 0.15, 0.86);` |圆形缓动；适合元素移动； | - - -`````jsx -var cssAnimation = require('css-animation'); -var motions = []; -motions = motions.concat([[{ - name: '淡入', - value: 'fade', - direction: 'enter', - type: '渐隐' -}, { - name: '淡出', - value: 'fade', - direction: 'leave', - type: '渐隐' -}]]); -motions = motions.concat([[{ - name: '中心放大', - value: 'zoom', - direction: 'enter', - type: '缩放' -}, { - name: '中心缩小', - value: 'zoom', - direction: 'leave', - type: '缩放' -}, { - name: '上方放大', - value: 'zoom-up', - direction: 'enter', - type: '缩放' -}, { - name: '上方缩小', - value: 'zoom-up', - direction: 'leave', - type: '缩放' -}, { - name: '下方放大', - value: 'zoom-down', - direction: 'enter', - type: '缩放' -}, { - name: '下方缩小', - value: 'zoom-down', - direction: 'leave', - type: '缩放' -}, { - name: '左方放大', - value: 'zoom-left', - direction: 'enter', - type: '缩放' -}, { - name: '左方缩小', - value: 'zoom-left', - direction: 'leave', - type: '缩放' -}, { - name: '右方放大', - value: 'zoom-right', - direction: 'enter', - type: '缩放' -}, { - name: '右方缩小', - value: 'zoom-right', - direction: 'leave', - type: '缩放' -}]]); -motions = motions.concat([[{ - name: '上方滑入', - value: 'move-up', - direction: 'enter', - type: '移动' -}, { - name: '上方滑出', - value: 'move-up', - direction: 'leave', - type: '移动' -}, { - name: '下方滑入', - value: 'move-down', - direction: 'enter', - type: '移动' -}, { - name: '下方滑出', - value: 'move-down', - direction: 'leave', - type: '移动' -}, { - name: '左方滑入', - value: 'move-left', - direction: 'enter', - type: '移动' -}, { - name: '左方滑出', - value: 'move-left', - direction: 'leave', - type: '移动' -}, { - name: '右方滑入', - value: 'move-right', - direction: 'enter', - type: '移动' -}, { - name: '右方滑入', - value: 'move-right', - direction: 'leave', - type: '移动' -}]]); -motions = motions.concat([[{ - name: '上方展开', - value: 'slide-up', - direction: 'enter', - type: '伸缩' -}, { - name: '上方缩回', - value: 'slide-up', - direction: 'leave', - type: '伸缩' -}, { - name: '下方展开', - value: 'slide-down', - direction: 'enter', - type: '伸缩' -}, { - name: '下方缩回', - value: 'slide-down', - direction: 'leave', - type: '伸缩' -}, { - name: '左方展开', - value: 'slide-left', - direction: 'enter', - type: '伸缩' -}, { - name: '左方缩回', - value: 'slide-left', - direction: 'leave', - type: '伸缩' -}, { - name: '右方展开', - value: 'slide-right', - direction: 'enter', - type: '伸缩' -}, { - name: '右方缩回', - value: 'slide-right', - direction: 'leave', - type: '伸缩' -}]]); -motions = motions.concat([[{ - name: '摇摆', - value: 'swing', - direction: 'enter', - type: '其他' -}]]); -var leave='-leave'; -var Test = React.createClass({ - handleChange(e) { - var value = e.target.value; - if(value){ - this.demoNode.style.visibility=''; - cssAnimation(this.demoNode, value, () => { - if(value.slice(-leave.length)===leave){ - this.demoNode.style.visibility='hidden'; - } - }); - } - }, - - componentDidMount() { - this.demoNode = React.findDOMNode(this.refs.demo); - }, - - render() { - var options = [].concat(motions.map(function (m) { - var opts = m.map(function (m2) { - return - }); - return {opts}; - })); - return
    -
    -
    栗子
    -
    -
    - -
    -
    ; - } -}); - -React.render(, document.getElementById('components-motion-demo-basic')); -````` - - diff --git a/static/motion.js b/static/motion.js index de5f0b9758..7e360a2511 100644 --- a/static/motion.js +++ b/static/motion.js @@ -647,7 +647,7 @@ $(function (){ var video=self.videoBox.eq(i).find("video"); video.css({"width":"100%"}); video.append(svg); - svg.css({"position":"absolute","top":0}); + svg.css({"position":"absolute","top":0,"left":0}); var playBox=_playBox(svg); svg.addChild(playBox); playBox.addEventListener("click",function (e){ @@ -670,4 +670,4 @@ $(function (){ } }; motionVideo.init(); -}); \ No newline at end of file +}); From 706caa855f6d5f242683db8ae5ca3bd5fd09cdee Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 29 Jul 2015 18:44:56 +0800 Subject: [PATCH 32/34] update alert component --- components/alert/demo/basic.md | 10 ++----- components/alert/demo/closable.md | 25 ++++++++++------- components/alert/demo/close-type.md | 10 ++----- components/alert/demo/description.md | 40 +++++++++++----------------- components/alert/demo/onClose.md | 33 ----------------------- components/alert/demo/style.md | 25 +++++------------ components/alert/index.jsx | 21 +++++++++------ components/alert/index.md | 1 + 8 files changed, 56 insertions(+), 109 deletions(-) delete mode 100644 components/alert/demo/onClose.md diff --git a/components/alert/demo/basic.md b/components/alert/demo/basic.md index 0e23ae1319..552cb6cc9c 100644 --- a/components/alert/demo/basic.md +++ b/components/alert/demo/basic.md @@ -9,12 +9,6 @@ ````jsx var Alert = require('antd/lib/alert'); -React.render( -
    - -
    , -document.getElementById('components-alert-demo-basic')); +React.render( +, document.getElementById('components-alert-demo-basic')); ```` diff --git a/components/alert/demo/closable.md b/components/alert/demo/closable.md index 58fc3cf66b..ec023b3ccc 100644 --- a/components/alert/demo/closable.md +++ b/components/alert/demo/closable.md @@ -9,13 +9,20 @@ ````jsx var Alert = require('antd/lib/alert'); -React.render( -
    - -
    , -document.getElementById('components-alert-demo-closable')); +var onClose = function(e) { + console.log(e, '我要被关闭啦！'); +}; + +React.render(
    + + +
    , document.getElementById('components-alert-demo-closable')); ```` + diff --git a/components/alert/demo/close-type.md b/components/alert/demo/close-type.md index 153441dd99..1c80a181be 100644 --- a/components/alert/demo/close-type.md +++ b/components/alert/demo/close-type.md @@ -11,12 +11,6 @@ var Alert = require('antd/lib/alert'); var link = 不再提醒 React.render( -
    - -
    , -document.getElementById('components-alert-demo-close-type')); + +, document.getElementById('components-alert-demo-close-type')); ```` diff --git a/components/alert/demo/description.md b/components/alert/demo/description.md index 2daa2e99d9..1adc39f013 100644 --- a/components/alert/demo/description.md +++ b/components/alert/demo/description.md @@ -9,28 +9,20 @@ ````jsx var Alert = require('antd/lib/alert'); -React.render( -
    - - - - -
    , -document.getElementById('components-alert-demo-description')); +React.render(
    + + + + +
    , document.getElementById('components-alert-demo-description')); ```` diff --git a/components/alert/demo/onClose.md b/components/alert/demo/onClose.md deleted file mode 100644 index 0da735ebce..0000000000 --- a/components/alert/demo/onClose.md +++ /dev/null @@ -1,33 +0,0 @@ -# 回调函数 - -- order: 5 - -警告提示被关闭时触发的回调函数，必须设置`closable="true"`。 - ---- - -````jsx -var Alert = require('antd/lib/alert'); - -var onClose = function(){ - console.log('我要被关闭啦！'); -} - -React.render( -
    - - -
    , -document.getElementById('components-alert-demo-onclose')); -```` diff --git a/components/alert/demo/style.md b/components/alert/demo/style.md index 336ccbc4d2..519501bc66 100644 --- a/components/alert/demo/style.md +++ b/components/alert/demo/style.md @@ -9,24 +9,11 @@ ````jsx var Alert = require('antd/lib/alert'); -React.render( -
    - - - - -
    , +React.render(
    + + + + +
    , document.getElementById('components-alert-demo-style')); ```` diff --git a/components/alert/index.jsx b/components/alert/index.jsx index 8fa18ea209..663789bff1 100644 --- a/components/alert/index.jsx +++ b/components/alert/index.jsx @@ -2,21 +2,26 @@ import React from 'react'; export default React.createClass({ getDefaultProps() { - return {prefixCls: 'ant-alert'}; + return { + prefixCls: 'ant-alert' + }; }, - getInitialState () { - return {display: 'block'}; + getInitialState() { + return { + display: 'block' + }; }, - handleClose () { + handleClose(e) { if (this.props.onClose) { - this.props.onClose(); + this.props.onClose.call(this, e); } this.setState({ display: 'none' }); }, render () { - var iconClass = this.props.description ? 'ant-alert-with-description-icon anticon-' : 'ant-alert-icon anticon-'; + var iconClass = this.props.description ? + 'ant-alert-with-description-icon anticon-' : 'ant-alert-icon anticon-'; switch (this.props.type) { case 'success': iconClass += 'check-circle'; @@ -32,7 +37,7 @@ export default React.createClass({ iconClass += 'default'; } if (this.props.description) { - let close = this.props.closable === 'true' ? + let close = this.props.closable ? : ''; return ( @@ -54,7 +59,7 @@ export default React.createClass({
    • ); } else { - let close = this.props.closable === 'true' ? + let close = this.props.closable ? : ''; diff --git a/components/alert/index.md b/components/alert/index.md index 4de86d8726..2bfd093a55 100644 --- a/components/alert/index.md +++ b/components/alert/index.md @@ -10,6 +10,7 @@ ## 何时使用 - 当系统需要向用户显示警告的信息时。 +- 始终展现，不会自动消失，用户可以点击关闭。 ## API From 35c7b96f268e1d4c2a48db67a614015ade1b6d46 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 29 Jul 2015 18:45:56 +0800 Subject: [PATCH 33/34] update alert description --- components/alert/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/alert/index.md b/components/alert/index.md index 2bfd093a55..b96c30153a 100644 --- a/components/alert/index.md +++ b/components/alert/index.md @@ -5,7 +5,7 @@ --- -警告提示。 +警告提示，展现需要关注的信息。 ## 何时使用 From b8ef693afce9de572b9dda72c63968426c594b27 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 29 Jul 2015 22:23:55 +0800 Subject: [PATCH 34/34] button loading animation effect --- components/button/demo/loading.md | 53 +++++++++++++++++++++++++------ style/components/button.less | 22 +++++++++++++ style/components/index.less | 1 - style/components/loading.less | 0 4 files changed, 66 insertions(+), 10 deletions(-) delete mode 100644 style/components/loading.less diff --git a/components/button/demo/loading.md b/components/button/demo/loading.md index 95d25bf33f..a818b92e8a 100644 --- a/components/button/demo/loading.md +++ b/components/button/demo/loading.md @@ -2,16 +2,51 @@ - order: 7 -点击后进入加载状态。 +加载按钮。最后一个按钮演示点击后进入加载状态。 --- -````html - - +````jsx +var App = React.createClass({ + getInitialState() { + return { + loading: false + }; + }, + enterLoading() { + this.setState({ + loading: true + }); + }, + render() { + var loadingClass = this.state.loading ? 'ant-btn-loading' : ''; + return
    + + + + +
    + +
    ; + } +}); + +React.render(, document.getElementById('components-button-demo-loading')); ```` + + diff --git a/style/components/button.less b/style/components/button.less index 107992650b..c51664f374 100644 --- a/style/components/button.less +++ b/style/components/button.less @@ -42,6 +42,28 @@ .btn-circle-outline; } + &-loading { + padding-right: 31px; + &:after { + font-family: anticon; + .animation(loadingCircle 1s infinite linear); + content: "\e610"; + position: absolute; + height: 12px; + line-height: 12px; + right: 13px; + top: 50%; + margin-top: -6px; + } + } + + &-sm&-loading { + padding-right: 24px; + &:after { + right: 8px; + } + } + &-menu { > .@{iconfont-css-prefix} { .iconfont-size-under-12px(10px); diff --git a/style/components/index.less b/style/components/index.less index 3f6ffb4c8a..a1092fd7d0 100644 --- a/style/components/index.less +++ b/style/components/index.less @@ -12,7 +12,6 @@ @import "popover"; @import "pagination"; @import "form"; -@import "loading"; @import "progress"; @import "steps"; @import "breadcrumb"; diff --git a/style/components/loading.less b/style/components/loading.less deleted file mode 100644 index e69de29bb2..0000000000