mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 14:13:37 +08:00
Code Issues Actions 28 Packages Projects Releases Wiki Activity

update page-transition video

Browse Source
This commit is contained in:
jljsj 2015-09-16 17:37:28 +08:00
parent 7a415fa4c6
commit c06e86ccdb
3 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
spec/page-transition.md
View File

@ -14,7 +14,6 @@
### 按钮反馈
<div class="video-player">
<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>
@ -37,7 +36,6 @@
<link rel="stylesheet" href="/static/motionDemo.css">
<div class="video-player">
<video preload loop><source src="https://t.alipayobjects.com/images/rmsweb/T12I8gXexdXXXXXXXX.webm" type="video/webm"><source src="https://t.alipayobjects.com/images/rmsweb/T1e0hgXcpdXXXXXXXX.mp4" type="video/mp4"></video>
</div>
@ -46,7 +44,7 @@
从一个触发点触发一个弹出框时，弹框从所触发区域弹出，且触发区域视觉上基本保持不变。这样让触发区域和弹出区域有所关联，提高用户对新内容的认知。
<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>
@ -61,7 +59,7 @@
<script src="/static/motionDemoLoad.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/)

9
static/motion.js
View File

@ -742,13 +742,22 @@ $(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'],
init: function () {
var self = this;
self.videoBox = $(".video-player");
$('<video preload loop></video>').appendTo(self.videoBox);
for (var i = 0; i < self.videoBox.length; i++) {
var svg = new SVG();
self.videoBox.eq(i).append(svg.node);
var video = self.videoBox.eq(i).find("video");
console.log(video[0].canPlayType('video/webm; codecs="vp8.0, vorbis"'));
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);
}
video.css({"width": "100%"});
video.append(svg);
svg.css({"position": "absolute", "top": 0, "left": 0});

4
static/motionDemoLoad.js
View File

@ -38,12 +38,12 @@ $(function () {
var sc = scripts[i].src, str = sc.split('?')[1];
if (sc.indexOf('motionDemoLoad.js') >= 0 && str) {
var d = str.split('&');
urlData = d.map((s)=> {
urlData = d.map(function (s) {
return {name: s.split('=')[0], param: s.split('=')[1]};
});
}
}
urlData.map((m)=> {
urlData.map(function (m) {
if (m.param === 'easing') {
callback = function () {
new Motion("#J-Linear", {