更新转场新增按钮交互与更新motion里的select

components/tabs/index.jsx

@@ -20,3 +20,4 @@ AntTabs.defaultProps = {
 AntTabs.TabPane = Tabs.TabPane;
 
 export default AntTabs;
+

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 = [<option value="">请选择预设动画</option>].concat(motions.map(function (m) {
+    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 <Option value={m2.value + "-" + m2.direction}>{m2.name + " " + m2.value}</Option>
       });
-      return <optgroup label={m[0].type}>{opts}</optgroup>;
+      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 className="motion-select-wrapper">
+        <Select value="" className='motion-select' onChange={this.handleChange}>{options}</Select>
       </div>
+
     </div>;
   }
 });
@@ -237,8 +243,12 @@ React.render(<Test/>, 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;
+}
 </style>
 

spec/page-transition.md

-# 转换动画
+# 互动转换
 
 - category: 动画
 - order: 1
 
 ---
 
-### 视觉连贯性三元素
-
-- Adding:  新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。
-
-- Receding:  与当前页无关的信息元素应采用适当方式移除。
-
-- Normal: 指那些从转场开始到结束都没有发生变化的信息元素。
-
-
-## 转场动画
-
-从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。
+## 响应互动
 
- - 大页面转场可采用左出右入的形式。
+响应交互一般是指我们在浏览页面时，点击元素时动画给我们视觉上的反馈，每个交互动效都能给我们带来不同视觉效果。
 
- - 小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，来指引用户的视觉轨迹。
+比如：按钮上的 hover 或 click 效果，随着你的鼠标事件而改变自身或增加元素在按钮上，或者折叠面板和弹出框，点击后给你呈现新加入的信息元素。
 
-<script src="/static/TweenMax.min.js"></script>
-<script src="/static/motion.js"></script>
+### 按钮反馈
 
 <div class="video-player">
-  <video preload loop><source src="https://t.alipayobjects.com/images/rmsweb/T14q0hXbBdXXXXXXXX.webm" type="video/webm"><source src="https://t.alipayobjects.com/images/T1qWNhXkpeXXXXXXXX.mp4" type="video/mp4"></video>
+  <video preload loop><source src="https://t.alipayobjects.com/images/rmsweb/T1yHhhXfxkXXXXXXXX.webm" type="video/webm"><source src="https://t.alipayobjects.com/images/rmsweb/T15IXhXlXbXXXXXXXX.mp4" type="video/mp4"></video>
 </div>
 
-> 参考我们的进场组件案例。查看[进场动画组件](/components/enter-animation/)
 
-## 响应互动
+## 转换动画
 
-响应交互一般是指我们在浏览页面时，点击元素时动画给我们视觉上的反馈，每个交互动效都能给我们带来不同视觉效果。
+### 视觉连贯性三元素
 
-比如：按钮上的 hover 或 click 效果，随着你的鼠标事件而改变自身或增加元素在按钮上，或者折叠面板和弹出框，点击后给你呈现新加入的信息元素。
+- Adding:  新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。
+
+- Receding:  与当前页无关的信息元素应采用适当方式移除。
+
+- Normal: 指那些从转场开始到结束都没有发生变化的信息元素。
 
 ### 可折叠面板
 
@@ -57,3 +48,21 @@
 <div class="video-player">
   <video preload loop><source src="https://t.alipayobjects.com/images/rmsweb/T1br0gXghtXXXXXXXX.webm" type="video/webm"><source src="https://t.alipayobjects.com/images/rmsweb/T1lcRgXb4gXXXXXXXX.mp4" type="video/mp4"></video>
 </div>
+
+
+### 页面转场
+
+从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。
+
+ - 大页面转场可采用左出右入的形式。
+
+ - 小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，来指引用户的视觉轨迹。
+
+<script src="/static/TweenMax.min.js"></script>
+<script src="/static/motion.js"></script>
+
+<div class="video-player">
+  <video preload loop><source src="https://t.alipayobjects.com/images/rmsweb/T14q0hXbBdXXXXXXXX.webm" type="video/webm"><source src="https://t.alipayobjects.com/images/T1qWNhXkpeXXXXXXXX.mp4" type="video/mp4"></video>
+</div>
+
+> 参考我们的进场组件案例。查看[进场动画组件](/components/enter-animation/)