add transition, remove page-transition

docs/spec/page-transition.md

@@ -1,65 +0,0 @@
-# 互动转换
-
-- category: 动画
-- order: 1
-
----
-
-## 响应互动
-
-响应交互一般是指我们在浏览页面时，点击元素时动画给我们视觉上的反馈，每个交互动效都能给我们带来不同视觉效果。
-
-比如：按钮上的 hover 或 click 效果，随着你的鼠标事件而改变自身或增加元素在按钮上，或者折叠面板和弹出框，点击后给你呈现新加入的信息元素。
-
-### 按钮反馈
-
-<div class="video-player">
-</div>
-
-
-## 转换动画
-
-### 视觉连贯性三元素
-
-- Adding:  新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。
-
-- Receding:  与当前页无关的信息元素应采用适当方式移除。
-
-- Normal: 指那些从转场开始到结束都没有发生变化的信息元素。
-
-### 可折叠面板
-
-对于信息元素内容区域的延伸，显示信息元素和进一步内容对象之间的直接连接。
-
- - 被展开的信息区域内容按照一定的路径依次进场。
-
-
-<link rel="stylesheet" href="../../static/motionDemo.css">
-<div class="video-player">
-</div>
-
-
-### 弹出框动效
-
-从一个触发点触发一个弹出框时，弹框从所触发区域弹出，且触发区域视觉上基本保持不变。这样让触发区域和弹出区域有所关联，提高用户对新内容的认知。
-
-<div class="video-player">
-
-</div>
-
-
-### 页面转场
-
-从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。
-
- - 大页面转场可采用左出右入的形式。
-
- - 小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，来指引用户的视觉轨迹。
-
-<script src="/static/motionDemoLoad.js"></script>
-
-<div class="video-player">
-
-</div>
-
-> 参考我们的进场组件案例。查看[进场动画组件(QueueAnim)](/components/queue-anim/)

docs/spec/transition.md

@@ -8,22 +8,57 @@
 
 人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。
 
+- Adding:  新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。
+
+- Receding:  与当前页无关的信息元素应采用适当方式移除。
+
+- Normal: 指那些从转场开始到结束都没有发生变化的信息元素。
+
+````css
+video{
+  display: block;
+}
+````
 
 ## 在视图变化时保持上下文
 
-<img class="preview-img" align="right" alt="滑入与滑出示例" src="https://os.alipayobjects.com/rmsportal/MjXZjESTHYphDUE.png">
+<div class="preview-image-boxes cleafix">
+  <span>
+    <div class="preview-image-box">
+      <div class="video-player" style="position: relative;"></div>
+      <div class="preview-image-title"></div>
+     <div class="preview-image-description"></div>
+    </div>
+  </span>
+</div>
 
 滑入与滑出：可以有效构建虚拟空间。
 
 <br>
 
-<img class="preview-img" align="right" alt="传送带示例" src="https://os.alipayobjects.com/rmsportal/MjXZjESTHYphDUE.png">
+<div class="preview-image-boxes cleafix">
+  <span>
+    <div class="preview-image-box">
+      <div class="video-player" style="position: relative;"></div>
+      <div class="preview-image-title">传送带示例</div>
+     <div class="preview-image-description"></div>
+    </div>
+  </span>
+</div>
 
 传送带：可极大地扩展虚拟空间。
 
 <br>
 
-<img class="preview-img" align="right" alt="折叠窗口示例" src="https://os.alipayobjects.com/rmsportal/MjXZjESTHYphDUE.png">
+<div class="preview-image-boxes cleafix">
+  <span>
+    <div class="preview-image-box">
+      <div class="video-player" style="position: relative;"></div>
+      <div class="preview-image-title">折叠窗口示例</div>
+     <div class="preview-image-description"></div>
+    </div>
+  </span>
+</div>
 
 折叠窗口：在视图切换时，有助于保持上下文，同时也能拓展虚拟空间。
 
@@ -35,24 +70,57 @@
 视图定位：在视图切换时，保持定位。
 
 ## 解释刚刚发生了什么
-
-<img class="preview-img" align="right" alt="对象增加示例" description="新增一条对象时，该行『高亮』告知用户这是新增项；几秒后『高亮』消失，以免过度干扰用户。" src="https://os.alipayobjects.com/rmsportal/RMKPlMuRPGIXJEv.png">
-
+<div class="preview-image-boxes cleafix">
+  <span>
+    <div class="preview-image-box">
+      <div class="video-player" style="position: relative;"></div>
+      <div class="preview-image-title">对象增加示例</div>
+     <div class="preview-image-description">新增一条对象时，该行『高亮』告知用户这是新增项；几秒后『高亮』消失，以免过度干扰用户。</div>
+    </div>
+  </span>
+</div>
 对象增加：在列表/表格中，新增了一个对象。
 
 <br>
-
-<img class="preview-img" align="right" alt="对象删除示例" src="https://os.alipayobjects.com/rmsportal/hgCtbpIeZIATKYo.png">
+<div class="preview-image-boxes cleafix">
+  <span>
+    <div class="preview-image-box">
+      <div class="video-player" style="position: relative;"></div>
+      <div class="preview-image-title">对象删除示例</div>
+     <div class="preview-image-description"></div>
+    </div>
+  </span>
+</div>
 
 对象删除：在列表/表格中，删除了一个对象。
 
 <br>
-
-<img class="preview-img" align="right" alt="对象更改示例" description="状态一：用户更改了『详情』中的值；<br>
-状态二：用户点击『保存』后，详情所在的网格出现『黄底』，表明该对象发生了更改；<br>状态三：底色持续『 1 秒』后消失，回复正常。" src="https://os.alipayobjects.com/rmsportal/OjFXjyZTyiOTlMh.png">
+<div class="preview-image-boxes cleafix">
+  <span>
+    <div class="preview-image-box">
+      <div class="video-player" style="position: relative;"></div>
+      <div class="preview-image-title">对象更改示例</div>
+     <div class="preview-image-description">状态一：用户更改了『详情』中的值；<br>
+     状态二：用户点击『保存』后，详情所在的网格出现『黄底』，表明该对象发生了更改；<br>状态三：底色持续『 1 秒』后消失，回复正常。</div>
+    </div>
+  </span>
+</div>
 
 对象更改：在列表/表格中，更改了一个对象。
 
+<br>
+<div class="preview-image-boxes cleafix">
+  <span>
+    <div class="preview-image-box">
+      <div class="video-player" style="position: relative;"></div>
+      <div class="preview-image-title">弹出框唤起</div>
+     <div class="preview-image-description">从页面的某个按钮唤起弹出框时, 弹框从按钮处唤起, 可提示用户弹框与按钮的关第;</div>
+    </div>
+  </span>
+</div>
+
+弹出框唤起：从页面的某个按钮唤起弹出框时, 弹框从按钮处唤起, 可提示用户弹框与按钮的关第;。
+
 
 ## 改善感知性能
 
@@ -67,3 +135,5 @@
 
 常见过渡效果：『按钮过渡』、『页面过渡』。
 
+
+<script src="/static/motionDemoLoad.js"></script>

site/static/motion.js

@@ -839,8 +839,12 @@ $(function() {
   window.Motion = newMotion;
 
   var motionVideo = {
-    video: ['https://t.alipayobjects.com/images/rmsweb/T1yHhhXfxkXXXXXXXX.webm', 'https://t.alipayobjects.com/images/rmsweb/T12I8gXexdXXXXXXXX.webm', 'https://t.alipayobjects.com/images/rmsweb/T1br0gXghtXXXXXXXX.webm', 'https://t.alipayobjects.com/images/rmsweb/T14q0hXbBdXXXXXXXX.webm'],
-    videoMp4: ['https://t.alipayobjects.com/images/rmsweb/T15IXhXlXbXXXXXXXX.mp4', 'https://t.alipayobjects.com/images/rmsweb/T1e0hgXcpdXXXXXXXX.mp4', 'https://t.alipayobjects.com/images/rmsweb/T1lcRgXb4gXXXXXXXX.mp4', 'https://t.alipayobjects.com/images/T1qWNhXkpeXXXXXXXX.mp4'],
+    video: [
+      'https://os.alipayobjects.com/rmsportal/EejaUGsyExkXyXr.mp4', 'https://os.alipayobjects.com/rmsportal/GIutPgZMTyfFfrH.mp4',
+      'https://os.alipayobjects.com/rmsportal/ERKhqHlcHiCDSQu.mp4', 'https://os.alipayobjects.com/rmsportal/FqkQMyFqNqielOw.mp4',
+      'https://os.alipayobjects.com/rmsportal/pnNkNIMoowmGUQy.mp4', 'https://os.alipayobjects.com/rmsportal/XrUIWmsmOlEnZGc.mp4',
+      'https://os.alipayobjects.com/rmsportal/gSNilqbiXOufDXF.mp4',
+    ],
     init: function() {
       var self = this;
       self.videoBox = $(".video-player");
@@ -849,11 +853,7 @@ $(function() {
         var svg = new SVG();
         self.videoBox.eq(i).append(svg.node);
         var video = self.videoBox.eq(i).find("video");
-        if (video[0].canPlayType('video/webm; codecs="vp8.0, vorbis"')) {
-          $('<source src="' + self.video[i] + '" type="video/webm">').appendTo(video);
-        } else {
-          $('<source src="' + self.videoMp4[i] + '" type="video/mp4">').appendTo(video);
-        }
+        $('<source src="' + self.video[i] + '" type="video/mp4">').appendTo(video);
         video.css({
           "width": "100%"
         });