diff --git a/components/tabs/index.jsx b/components/tabs/index.jsx
index 5686353d598456271ded52a66b35292904fe28a5..9c0207e085d8bcda7f041d020363fce6703d35be 100644
--- a/components/tabs/index.jsx
+++ b/components/tabs/index.jsx
@@ -20,3 +20,4 @@ AntTabs.defaultProps = {
AntTabs.TabPane = Tabs.TabPane;
export default AntTabs;
+
diff --git a/spec/motion.md b/spec/motion.md
index 0853d71c9c98f654ab1e05216a8dc9ee943f7e95..71527949c37b082c784abf7f6f79344c40630f70 100644
--- a/spec/motion.md
+++ b/spec/motion.md
@@ -28,6 +28,11 @@ Ant Design 提供了一些预设的组件动画样式。
`````jsx
var cssAnimation = require('css-animation');
+var Select = antd.Select;
+var Option = Select.Option;
+var OptGroup = Select.OptGroup;
+
+
var motions = [];
motions = motions.concat([[{
name: '淡入',
@@ -182,7 +187,7 @@ motions = motions.concat([[{
var leave='-leave';
var Test = React.createClass({
handleChange(e) {
- var value = e.target.value;
+ var value = e;
if(value){
this.demoNode.style.visibility='';
cssAnimation(this.demoNode, value, () => {
@@ -198,19 +203,20 @@ var Test = React.createClass({
},
render() {
- var options = [].concat(motions.map(function (m) {
+ var options = [].concat(motions.map(function (m) {
var opts = m.map(function (m2) {
- return
+ return
});
- return ;
+ return ;
}));
return
-
-
+
+
+
;
}
});
@@ -237,8 +243,12 @@ React.render(
, document.getElementById('components-motion-demo-basic'));
font-weight: bold;
background: url(https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg) center/230px;
}
-.motion-select {
+.motion-select-wrapper{
text-align: center;
}
+.motion-select {
+ text-align:left;
+ width:180px;
+}
diff --git a/spec/page-transition.md b/spec/page-transition.md
index ca5c7518514302b78b6598be1ab5cc75bcbfbe5a..4a52441dcae24c7db401492f3b0b972aeb12a9c1 100644
--- a/spec/page-transition.md
+++ b/spec/page-transition.md
@@ -1,41 +1,32 @@
-# 转换动画
+# 互动转换
- category: 动画
- order: 1
---
-### 视觉连贯性三元素
-
-- Adding: 新加入的信息元素应被告知如何使用,从页面转变的信息元素需被重新识别。
-
-- Receding: 与当前页无关的信息元素应采用适当方式移除。
-
-- Normal: 指那些从转场开始到结束都没有发生变化的信息元素。
-
-
-## 转场动画
-
-从内容A到内容B的转变过程时能有效的吸引用户注意力,突出视觉中心,提高整体视觉效果。
+## 响应互动
- - 大页面转场可采用左出右入的形式。
+响应交互一般是指我们在浏览页面时,点击元素时动画给我们视觉上的反馈,每个交互动效都能给我们带来不同视觉效果。
- - 小的信息元素排布或块状较多的情况下,根据一定的路径层次依次进场,区分维度层级,来凸显量级,来指引用户的视觉轨迹。
+比如:按钮上的 hover 或 click 效果,随着你的鼠标事件而改变自身或增加元素在按钮上,或者折叠面板和弹出框,点击后给你呈现新加入的信息元素。
-
-
+### 按钮反馈
-
+
-> 参考我们的进场组件案例。查看[进场动画组件](/components/enter-animation/)
-## 响应互动
+## 转换动画
-响应交互一般是指我们在浏览页面时,点击元素时动画给我们视觉上的反馈,每个交互动效都能给我们带来不同视觉效果。
+### 视觉连贯性三元素
-比如:按钮上的 hover 或 click 效果,随着你的鼠标事件而改变自身或增加元素在按钮上,或者折叠面板和弹出框,点击后给你呈现新加入的信息元素。
+- Adding: 新加入的信息元素应被告知如何使用,从页面转变的信息元素需被重新识别。
+
+- Receding: 与当前页无关的信息元素应采用适当方式移除。
+
+- Normal: 指那些从转场开始到结束都没有发生变化的信息元素。
### 可折叠面板
@@ -57,3 +48,21 @@
+
+
+### 页面转场
+
+从内容A到内容B的转变过程时能有效的吸引用户注意力,突出视觉中心,提高整体视觉效果。
+
+ - 大页面转场可采用左出右入的形式。
+
+ - 小的信息元素排布或块状较多的情况下,根据一定的路径层次依次进场,区分维度层级,来凸显量级,来指引用户的视觉轨迹。
+
+
+
+
+
+
+
+
+> 参考我们的进场组件案例。查看[进场动画组件](/components/enter-animation/)