mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
improve video in markdown
This commit is contained in:
afc163
parent
fb59c4d00b
commit
26c4e07040
@ -8,62 +8,32 @@
|
||||
|
||||
人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。
|
||||
|
||||
- Adding: 新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。
|
||||
- Adding: 新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。
|
||||
|
||||
- Receding: 与当前页无关的信息元素应采用适当方式移除。
|
||||
- Receding: 与当前页无关的信息元素应采用适当方式移除。
|
||||
|
||||
- Normal: 指那些从转场开始到结束都没有发生变化的信息元素。
|
||||
|
||||
````css
|
||||
video{
|
||||
display: block;
|
||||
}
|
||||
````
|
||||
|
||||
<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>
|
||||
<img class="preview-img" align="right" alt="滑入与滑出示例" src="https://os.alipayobjects.com/rmsportal/EejaUGsyExkXyXr.mp4" type="video" />
|
||||
|
||||
滑入与滑出：可以有效构建虚拟空间。
|
||||
|
||||
<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>
|
||||
<img class="preview-img" align="right" alt="传送带示例" src="https://os.alipayobjects.com/rmsportal/GIutPgZMTyfFfrH.mp4" type="video" />
|
||||
|
||||
|
||||
传送带：可极大地扩展虚拟空间。
|
||||
|
||||
<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>
|
||||
<img class="preview-img" align="right" alt="折叠窗口示例" src="https://os.alipayobjects.com/rmsportal/ERKhqHlcHiCDSQu.mp4" type="video" />
|
||||
|
||||
|
||||
折叠窗口：在视图切换时，有助于保持上下文，同时也能拓展虚拟空间。
|
||||
|
||||
@ -79,59 +49,30 @@ video{
|
||||
---
|
||||
|
||||
## 解释刚刚发生了什么
|
||||
<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>
|
||||
|
||||
|
||||
<img class="preview-img" align="right" alt="对象增加示例" description="新增一条对象时，该行『高亮』告知用户这是新增项；几秒后『高亮』消失，以免过度干扰用户。" src="https://os.alipayobjects.com/rmsportal/FqkQMyFqNqielOw.mp4" type="video" />
|
||||
|
||||
|
||||
对象增加：在列表/表格中，新增了一个对象。
|
||||
|
||||
<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>
|
||||
|
||||
<img class="preview-img" align="right" alt="对象删除示例" src="https://os.alipayobjects.com/rmsportal/pnNkNIMoowmGUQy.mp4" type="video" />
|
||||
|
||||
对象删除：在列表/表格中，删除了一个对象。
|
||||
|
||||
<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">状态一：用户更改了『详情』中的值；<br>
|
||||
状态二：用户点击『保存』后，详情所在的网格出现『黄底』，表明该对象发生了更改；<br>状态三：底色持续『 1 秒』后消失，回复正常。</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<img class="preview-img" align="right" alt="对象更改示例" description="状态一：用户更改了『详情』中的值；<br>状态二：用户点击『保存』后，详情所在的网格出现『黄底』，表明该对象发生了更改；<br>状态三：底色持续『 1 秒』后消失，回复正常。" src="https://os.alipayobjects.com/rmsportal/XrUIWmsmOlEnZGc.mp4" type="video" />
|
||||
|
||||
对象更改：在列表/表格中，更改了一个对象。
|
||||
|
||||
<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>
|
||||
|
||||
弹出框唤起：从页面的某个按钮唤起弹出框时, 弹框从按钮处唤起, 可提示用户弹框与按钮的关第;。
|
||||
|
||||
<img class="preview-img" align="right" alt="弹出框唤起示例" src="https://os.alipayobjects.com/rmsportal/gSNilqbiXOufDXF.mp4" type="video" />
|
||||
|
||||
弹出框唤起：从页面的某个按钮唤起弹出框时, 弹框从按钮处唤起, 可提示用户弹框与按钮的关联。
|
||||
|
||||
---
|
||||
|
||||
@ -145,8 +86,6 @@ video{
|
||||
|
||||
<img class="preview-img" align="right" alt="页面过渡示例" src="https://os.alipayobjects.com/rmsportal/MjXZjESTHYphDUE.png">
|
||||
|
||||
|
||||
常见过渡效果：『按钮过渡』、『页面过渡』。
|
||||
|
||||
|
||||
<script src="/static/motionDemoLoad.js"></script>
|
||||
|
||||
@ -193,10 +193,20 @@ const PriviewImg = React.createClass({
|
||||
const createMarkup = () => {
|
||||
return {__html: this.props.description}
|
||||
};
|
||||
|
||||
let node = <img src={this.props.src} onClick={this.showImageModal} style={imgStyle} alt="Sample Picture" />;
|
||||
if (this.props.type === 'video') {
|
||||
node = (
|
||||
<video preload loop style={imgStyle}>
|
||||
<source src={this.props.src} type="video/mp4" />
|
||||
</video>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="preview-image-box" style={{ width: this.props.width }}>
|
||||
<div className={`preview-image-wrapper ${goodCls} ${badCls}`}>
|
||||
<img src={this.props.src} onClick={this.showImageModal} style={imgStyle} alt="Sample Picture"/>
|
||||
{node}
|
||||
</div>
|
||||
<div className="preview-image-title">{this.props.alt}</div>
|
||||
<div className="preview-image-description" dangerouslySetInnerHTML={createMarkup()}/>
|
||||
@ -245,7 +255,9 @@ InstantClickChangeFns.push(function () {
|
||||
priviewImgNodes.each(function (i, img) {
|
||||
priviewImgs.push(
|
||||
<PriviewImg key={i} src={img.src} width={100.0/priviewImgNodes.length + '%'} alt={img.alt}
|
||||
noPadding={img.hasAttribute('noPadding')} description={img.getAttribute('description')}
|
||||
noPadding={img.hasAttribute('noPadding')}
|
||||
description={img.getAttribute('description')}
|
||||
type={img.getAttribute('type')}
|
||||
good={!!img.hasAttribute('good')} bad={!!img.hasAttribute('bad')}/>
|
||||
);
|
||||
});
|
||||
|
||||
@ -846,23 +846,10 @@ $(function() {
|
||||
'https://os.alipayobjects.com/rmsportal/gSNilqbiXOufDXF.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++) {
|
||||
$(".preview-image-box video").each(function(i, video) {
|
||||
var svg = new SVG();
|
||||
self.videoBox.eq(i).append(svg.node);
|
||||
var video = self.videoBox.eq(i).find("video");
|
||||
$('<source src="' + self.video[i] + '" type="video/mp4">').appendTo(video);
|
||||
video.css({
|
||||
"width": "100%"
|
||||
});
|
||||
video.append(svg);
|
||||
svg.css({
|
||||
"position": "absolute",
|
||||
"top": 0,
|
||||
"left": 0
|
||||
});
|
||||
video = $(video);
|
||||
video.parent().append(svg.node);
|
||||
var playBox = _playBox(svg);
|
||||
svg.addChild(playBox);
|
||||
playBox.addEventListener("click", function(e) {
|
||||
@ -877,11 +864,10 @@ $(function() {
|
||||
this.setTimeout = setTimeout(function() {
|
||||
video[0].play();
|
||||
}, 500);
|
||||
|
||||
m.attr("play", "true")
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
window.Motion.motionVideo = motionVideo;
|
||||
|
||||
@ -1202,6 +1202,16 @@ a.entry-link:hover .anticon-smile {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.preview-image-wrapper video {
|
||||
display: block;
|
||||
width: 100%;
|
||||
+ svg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-image-wrapper.good:after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user