mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 06:03:38 +08:00
修改站点结构，开放设计文档
This commit is contained in:
afc163
parent
9acba5d4ae
commit
7276554fd5
@ -2,7 +2,7 @@
|
||||
|
||||
- category: Components
|
||||
- chinese: 字体图标
|
||||
- order: 1
|
||||
- order: 0
|
||||
- nodemos: true
|
||||
|
||||
---
|
||||
|
||||
@ -1 +1 @@
|
||||
<meta http-equiv="refresh" content="0; url=/components/layout" />
|
||||
<meta http-equiv="refresh" content="0; url=/components/button" />
|
||||
|
||||
@ -6,218 +6,4 @@
|
||||
|
||||
---
|
||||
|
||||
````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 = [<option value="">请选择预设动画</option>].concat(motions.map(function (m) {
|
||||
var opts = m.map(function (m2) {
|
||||
return <option value={m2.value + "-" + m2.direction}>{m2.name + " " + m2.value}</option>
|
||||
});
|
||||
return <optgroup label={m[0].type}>{opts}</optgroup>;
|
||||
}));
|
||||
return <div>
|
||||
<div className="motion-container">
|
||||
<div ref="demo" className="motion-example">栗子</div>
|
||||
</div>
|
||||
<div className="motion-select">
|
||||
<select onChange={this.handleChange}>{options}</select>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
});
|
||||
|
||||
React.render(<Test/>, document.getElementById('components-motion-demo-basic'));
|
||||
````
|
||||
|
||||
<style>
|
||||
.motion-container {
|
||||
height: 150px;
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.motion-example {
|
||||
background: #4AAFDE;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
line-height: 140px;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
display: inline-block !important;
|
||||
border-radius: 8px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.motion-select {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,13 +1,15 @@
|
||||
# Motion
|
||||
|
||||
- category: CSS
|
||||
- chinese: 组件动画
|
||||
- order: 4
|
||||
- cols: 1
|
||||
- order: 1
|
||||
- nodemos: true
|
||||
|
||||
---
|
||||
|
||||
## 组件的动画
|
||||
Ant Design 提供了一些预设的组件动画展现和缓动函数。
|
||||
|
||||
<div id="components-motion-demo-basic"></div>
|
||||
|
||||
## 组件动画
|
||||
|
||||
通过设置组件的 `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 = [<option value="">请选择预设动画</option>].concat(motions.map(function (m) {
|
||||
var opts = m.map(function (m2) {
|
||||
return <option value={m2.value + "-" + m2.direction}>{m2.name + " " + m2.value}</option>
|
||||
});
|
||||
return <optgroup label={m[0].type}>{opts}</optgroup>;
|
||||
}));
|
||||
return <div>
|
||||
<div className="motion-container">
|
||||
<div ref="demo" className="motion-example">栗子</div>
|
||||
</div>
|
||||
<div className="motion-select">
|
||||
<select onChange={this.handleChange}>{options}</select>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
});
|
||||
|
||||
React.render(<Test/>, document.getElementById('components-motion-demo-basic'));
|
||||
`````
|
||||
|
||||
<style>
|
||||
.motion-container {
|
||||
height: 150px;
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.motion-example {
|
||||
background: #4AAFDE;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
line-height: 140px;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
display: inline-block !important;
|
||||
border-radius: 8px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.motion-select {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,104 +0,0 @@
|
||||
# 响应交互
|
||||
|
||||
- category: 动画
|
||||
- order: 1
|
||||
|
||||
---
|
||||
|
||||
响应交互一般是指我们在浏览页面时，点击元素时动画给我们视觉上的反馈，每个交互动效都能给我们带来不同视觉效果。
|
||||
|
||||
如搜索框，当你点击准备输入时，icon将会跑到右边方便点击，当然你按回车也是可以提交表单的；在你没有输入文字时，icon又会恢愎到原来的地置，但当你输入了文字后，icon将会停留在右边；
|
||||
|
||||
### 按钮类表面效果
|
||||
|
||||
按钮上的hover或click效果，随着你的鼠标事件而改变自身或增加元素在按钮上；
|
||||
|
||||
以下按钮对组件按钮的修改，只做示例，具体还需看组件；
|
||||
<link rel="stylesheet" href="/static/motionDemo.css">
|
||||
<script src="/static/motionDemo.js"></script>
|
||||
<div style="overflow: hidden;">
|
||||
<div style="width:200px;float:left;margin-right:60px">
|
||||
<p style="text-align: center;"> 1.按钮表面效果；</p>
|
||||
<div class="ant-btn-domebox">
|
||||
<a class="ant-btn ant-btn-primary">我是按钮</a>
|
||||
<a class="ant-btn ant-btn-primary ant-btn-ripple">
|
||||
点击涟漪按钮
|
||||
</a>
|
||||
<a class="ant-btn ant-btn-ripple">
|
||||
点击涟漪按钮
|
||||
</a>
|
||||
<button class="ant-btn ant-btn-ghost ant-btn-circle-outline ant-btn-lg" style="display: block;">
|
||||
<span class="anticon anticon-search"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:200px;float:left;">
|
||||
<p style="text-align: center;"> 2.无素结合切换;</p>
|
||||
<div class="ant-btn-domebox">
|
||||
<button class="ant-btn ant-btn-primary ant-btn-ripple ant-btn-load ">
|
||||
<text>加载按钮</text>
|
||||
<span class='anticon anticon-loading'></span>
|
||||
</button>
|
||||
<button class="ant-btn ant-btn-primary ant-btn-reload ant-btn-ripple">
|
||||
<span class="anticon anticon-reload"></span>
|
||||
<text>刷新</text>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### 元素类呈现效果
|
||||
|
||||
元素呈现指点击或滑过展现相关的内容或提示，如下拉菜单或弹出框等；
|
||||
|
||||
注：物体弹出点要从点击点出现，不要做凭空出现；
|
||||
|
||||
|
||||
<div style="overflow: hidden;">
|
||||
|
||||
<div style="width:200px;float:left;margin-right:60px">
|
||||
<p style="text-align: center;"> 1.icon菜单(点放大模式)</p>
|
||||
<div class="ant-btn-domebox" >
|
||||
|
||||
|
||||
<button class="ant-btn ant-btn-ghost ant-btn-circle-outline ant-btn-lg ant-btn-ripple ant-btn-listtip" style="float:right;margin:0" data-id="J-Tip">
|
||||
<span class="anticon anticon-bars"></span>
|
||||
</button>
|
||||
<div class="ant-anim-dometip ant-anim-topArrow scale-origin-iconTopRight" style="display:none;" id="J-Tip">
|
||||
<ul>
|
||||
<li>第一排文字元素</li>
|
||||
<li>第二排文字元素</li>
|
||||
<li>第三排文字元素</li>
|
||||
<li>第四排文字元素</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width:200px;float:left;">
|
||||
<p style="text-align: center;">2.下拉菜单(下滑模式)</p>
|
||||
<div class="ant-btn-domebox">
|
||||
|
||||
|
||||
<div class="ant-dropdown-wrap">
|
||||
<button class="ant-btn ant-btn-primary ant-btn-menu ant-btn-dropdown ant-btn-ripple">
|
||||
<span>菜单按钮</span>
|
||||
<span class="anticon anticon-down"></span>
|
||||
</button>
|
||||
<div class="ant-dropdown ant-anim-dometip scale-origin-top">
|
||||
<div class="ant-dropdown-con">
|
||||
<ul>
|
||||
<li>第一排文字元素</li>
|
||||
<li>第二排文字元素</li>
|
||||
<li>第三排文字元素</li>
|
||||
<li>第四排文字元素</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -96,7 +96,7 @@
|
||||
<a href="/docs/introduce">使用</a>
|
||||
</li>
|
||||
<li class="{%- if post.directory|rootDirectoryIs('design') %}current{%- endif %}">
|
||||
<a class="disabled" href="/design/">设计</a>
|
||||
<a href="/spec/font">设计</a>
|
||||
</li>
|
||||
<li class="{%- if post.directory|rootDirectoryIs('components') %}current{%- endif %}">
|
||||
<a href="/components">组件</a>
|
||||
|
||||
@ -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;
|
||||
|
||||
6
spec/color.md
Normal file
6
spec/color.md
Normal file
@ -0,0 +1,6 @@
|
||||
# 色系和交互
|
||||
|
||||
- category: 色彩
|
||||
- order: 0
|
||||
|
||||
---
|
||||
@ -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"});
|
||||
</script>
|
||||
|
||||
上图所示缓动函数：红：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);` |圆形缓动；适合元素移动； |
|
||||
7
spec/font.md
Normal file
7
spec/font.md
Normal file
@ -0,0 +1,7 @@
|
||||
# 字体
|
||||
|
||||
- category: 文字
|
||||
- order: 0
|
||||
|
||||
---
|
||||
|
||||
244
spec/motion.md
Normal file
244
spec/motion.md
Normal file
@ -0,0 +1,244 @@
|
||||
# 组件动画
|
||||
|
||||
- category: 动画
|
||||
- order: 0
|
||||
|
||||
---
|
||||
|
||||
Ant Design 提供了一些预设的组件动画样式。
|
||||
|
||||
<div id="components-motion-demo-basic"></div>
|
||||
|
||||
## 组件动画
|
||||
|
||||
通过设置组件的 `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 = [<option value="">请选择预设动画</option>].concat(motions.map(function (m) {
|
||||
var opts = m.map(function (m2) {
|
||||
return <option value={m2.value + "-" + m2.direction}>{m2.name + " " + m2.value}</option>
|
||||
});
|
||||
return <optgroup label={m[0].type}>{opts}</optgroup>;
|
||||
}));
|
||||
return <div>
|
||||
<div className="motion-container">
|
||||
<div ref="demo" className="motion-example">栗子</div>
|
||||
</div>
|
||||
<div className="motion-select">
|
||||
<select onChange={this.handleChange}>{options}</select>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
});
|
||||
|
||||
React.render(<Test/>, document.getElementById('components-motion-demo-basic'));
|
||||
`````
|
||||
|
||||
<style>
|
||||
.motion-container {
|
||||
height: 150px;
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.motion-example {
|
||||
background: #4AAFDE;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
line-height: 140px;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
display: inline-block !important;
|
||||
border-radius: 8px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.motion-select {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,18 +1,17 @@
|
||||
# 页面转换
|
||||
# 转场动画
|
||||
|
||||
- category: 动画
|
||||
- chinese: 页面转换
|
||||
- order: 2
|
||||
- order: 1
|
||||
|
||||
---
|
||||
|
||||
###单页面转场动画
|
||||
### 单页面转场动画
|
||||
|
||||
从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。
|
||||
|
||||
####视觉连贯性
|
||||
#### 视觉连贯性
|
||||
|
||||
####三类元素（Adding ,Receding,Normal)
|
||||
#### 三类元素（Adding, Receding, Normal）
|
||||
|
||||
Adding: 新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。
|
||||
|
||||
@ -53,7 +52,7 @@ Normal: 指那些从转场开始到结束都没有发生变化的信息元素
|
||||
</div>
|
||||
|
||||
|
||||
####弹出框动效
|
||||
#### 弹出框动效
|
||||
|
||||
|
||||
从一个触发点触发一个弹出框时，弹框从所触发区域弹出，且触发区域视觉上基本保持不变。这样让触发区域和弹出区域有所关联，提高用户对新内容的认知。
|
||||
6
spec/typography.md
Normal file
6
spec/typography.md
Normal file
@ -0,0 +1,6 @@
|
||||
# 排版
|
||||
|
||||
- category: 文字
|
||||
- order: 1
|
||||
|
||||
---
|
||||
Loading…
Reference in New Issue
Block a user