Skip to content

A
ant-design

wanjj_1210 / ant-design
与 Fork 源项目一致

从无法访问的项目Fork

通知 10
Star 0
Fork 0
A
ant-design

体验新版 GitCode，发现更多精彩内容 >>

提交 8f1a616b 编写于 作者: J jljsj 提交者： afc163
浏览文件
操作

add enterAnimation

上级 7aa01c46
隐藏空白更改
内联 并排
Showing with 482 addition and 43 deletion
components/enter-animation/demo/basic.md
浏览文件 @ 8f1a616b
# 基本
# 基本(子节点控制进场)
- order: 0
第一个对话框。
模拟页面演示，子节点控制进场。`EnterAnimation` 里延时1秒`enter-data` 用到的参数：`type` `queueId` `delay`。
---
````jsx
var EnterAnimation = antd.EnterAnimation;
var Test = React.createClass({
getInitialState(){
return{
visible: false
}
},
showModal() {
this.setState({
visible: true
});
},
handleOk() {
console.log('点击了确定');
this.setState({
visible: false
});
},
handleCancel() {
console.log('点击了取消');
this.setState({
visible: false
});
},
render() {
return <div>
<button className="ant-btn ant-btn-primary" onClick={this.showModal}>显示对话框</button>
<Modal title="第一个 Modal"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}>
<p>对话框的内容</p>
<p>对话框的内容</p>
<p>对话框的内容</p>
</Modal>
</div>;
return (
<EnterAnimation className="demo-startAnim" delay={1}>
<div className="demo-header" enter-data={{type:'alpha'}}>
<div className="logo" enter-data={{type:'left'}}>
<img width="30" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg"/>
<span>logo</span>
</div>
<ul>
<li enter-data></li>
<li enter-data></li>
<li enter-data></li>
<li enter-data></li>
<li enter-data></li>
</ul>
</div>
<div className="demo-content">
<div className="demo-title" enter-data={{type:'alpha'}}>我是标题</div>
<div className="demo-kp">
<ul>
<li enter-data></li>
<li enter-data></li>
<li enter-data></li>
</ul>
</div>
<div className="demo-title" enter-data={{type:'alpha'}}>我是标题</div>
<div className="demo-listBox">
<ul>
<li>
<div className="demo-list">
<div className="title" enter-data={{type:'bottom'}}></div>
<ul>
<li enter-data={{type:'bottom'}}></li>
<li enter-data={{type:'bottom'}}></li>
<li enter-data={{type:'bottom'}}></li>
<li enter-data={{type:'bottom'}}></li>
<li enter-data={{type:'bottom'}}></li>
</ul>
</div>
</li>
<li>
<div className="demo-list">
<div className="title" enter-data={{type:'bottom',queueId:1,delay:1.4}}></div>
<ul>
<li enter-data={{type:'bottom',queueId:1}}></li>
<li enter-data={{type:'bottom',queueId:1}}></li>
<li enter-data={{type:'bottom',queueId:1}}></li>
<li enter-data={{type:'bottom',queueId:1}}></li>
<li enter-data={{type:'bottom',queueId:1}}></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div className="demo-footer" enter-data={{type:'bottom',queueId:1}}></div>
</EnterAnimation>
)
}
});
React.render(<Test/> , document.getElementById('components-modal-demo-basic'));
React.render(<Test/> , document.getElementById('components-enter-animation-demo-basic'));
````
<style>
.demo-startAnim {
width: 400px;
text-align: center;
overflow: hidden;
margin: 20px auto;
}
.demo-startAnim .demo-header {
width: 100%;
background: #ebedee;
height: 30px;
}
.demo-startAnim .demo-header ul {
float: right;
margin-right: 10px;
}
.demo-startAnim .demo-header ul li {
width: 30px;
height: 30px;
float: left;
background: #e4e4e4;
margin-left: 2px;
}
.demo-startAnim .demo-header ul li:before {
margin: 10px auto;
width: 10px;
height: 10px;
background: #ebeded;
}
.demo-startAnim .demo-header .logo {
float: left;
margin: 0px auto 0 10px;
line-height: 32px;
}
.demo-startAnim .demo-header .logo img{
margin:auto
}
.demo-startAnim .demo-header .logo span {
display: block;
float: right;
}
.demo-startAnim .demo-content {
width: 80%;
margin: 10px auto;
}
.demo-startAnim .demo-content .demo-title {
background: #a4a4a4;
width: 40%;
height: 20px;
line-height: 20px;
color: #ebeded;
}
.demo-startAnim .demo-content .demo-listBox {
margin-top: 10px;
}
.demo-startAnim .demo-content .demo-listBox > ul > li {
float: left;
width: 47.5%;
overflow: hidden;
}
.demo-startAnim .demo-content .demo-listBox > ul > li:last-child {
margin-left: 5%;
}
.demo-startAnim .demo-content .demo-listBox .demo-list .title {
height: 25px;
background: #cacaca;
overflow: hidden;
}
.demo-startAnim .demo-content .demo-listBox .demo-list .title:before {
width: 50%;
height: 5px;
background: #ebeded;
margin: 10px auto;
}
.demo-startAnim .demo-content .demo-listBox .demo-list ul li {
height: 20px;
background: #ebeded;
border-bottom: 1px solid #cacaca;
overflow: hidden;
padding: 5px 15px;
}
.demo-startAnim .demo-content .demo-listBox .demo-list ul li:before {
width: 20px;
height: 10px;
background: #cacaca;
float: left;
}
.demo-startAnim .demo-content .demo-listBox .demo-list ul li:after {
width: 60%;
height: 5px;
background: #cacaca;
float: left;
margin-left: 10px;
margin-top: 2px;
}
.demo-startAnim .demo-content .demo-kp {
margin: 10px auto;
}
.demo-startAnim .demo-content .demo-kp ul li {
display: inline-block;
width: 30%;
height: 30px;
background: #cacaca;
color: #ebeded;
text-align: left;
padding: 10px;
margin-right: calc(1%);
}
.demo-startAnim .demo-content .demo-kp ul li:last-child {
margin-right: 0%;
}
.demo-startAnim .demo-content .demo-kp ul li:after {
width: 60%;
height: 5px;
background: #ebeded;
float: left;
margin-top: 2px;
}
.demo-startAnim .demo-content .demo-kp ul li:before {
background: #ebeded;
float: left;
width: 10px;
height: 10px;
margin-right: 10%;
}
.demo-startAnim .demo-footer {
margin-top: 10px;
background: #cacaca;
height: 30px;
float: left;
width: 100%;
display: table;
}
.demo-startAnim .demo-footer:before {
width: 60%;
height: 5px;
background: #ededed;
margin: 5px auto 0;
}
.demo-startAnim .demo-footer:after {
width: 30%;
height: 5px;
background: #ededed;
margin: 5px auto;
}
.demo-startAnim .demo-header ul li:before,
.demo-startAnim .demo-content .demo-kp ul li:before,
.demo-startAnim .demo-content .demo-kp ul li:after,
.demo-startAnim .demo-content .demo-listBox .demo-list .title:before,
.demo-startAnim .demo-content .demo-listBox .demo-list ul li:before,
.demo-startAnim .demo-content .demo-listBox .demo-list ul li:after,
.demo-startAnim .demo-footer:before,
.demo-startAnim .demo-footer:after {
display: block;
content: "";
}
</style>
components/enter-animation/demo/label.md 0 → 100644
浏览文件 @ 8f1a616b
# 主标签控制动画
- order: 1
主标签上控制进场, `EnterAnimation` 里延时1秒,递增`interval`为0.2;
---
````jsx
var EnterAnimation = antd.EnterAnimation;
var Test = React.createClass({
render() {
return (
<EnterAnimation className="demo-startAnim" delay={1} interval={.2}>
<div className="demo-header">
<div className="logo">
<img width="30" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
<span>logo</span>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div className="demo-content">
<div className="demo-title">我是标题</div>
<div className="demo-kp">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div className="demo-title">我是标题</div>
<div className="demo-listBox">
<ul>
<li>
<div className="demo-list">
<div className="title"></div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</li>
<li>
<div className="demo-list">
<div className="title"></div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div className="demo-footer"></div>
</EnterAnimation>
)
}
});
React.render(<Test/> , document.getElementById('components-enter-animation-demo-label'));
````
<style>
.demo-startAnim {
width: 400px;
text-align: center;
overflow: hidden;
margin: 20px auto;
}
.demo-startAnim .demo-header {
width: 100%;
background: #ebedee;
height: 30px;
}
.demo-startAnim .demo-header ul {
float: right;
margin-right: 10px;
}
.demo-startAnim .demo-header ul li {
width: 30px;
height: 30px;
float: left;
background: #e4e4e4;
margin-left: 2px;
}
.demo-startAnim .demo-header ul li:before {
margin: 10px auto;
width: 10px;
height: 10px;
background: #ebeded;
}
.demo-startAnim .demo-header .logo {
float: left;
margin: 0px auto 0 10px;
line-height: 32px;
}
.demo-startAnim .demo-header .logo img{
margin:auto
}
.demo-startAnim .demo-header .logo span {
display: block;
float: right;
}
.demo-startAnim .demo-content {
width: 80%;
margin: 10px auto;
}
.demo-startAnim .demo-content .demo-title {
background: #a4a4a4;
width: 40%;
height: 20px;
line-height: 20px;
color: #ebeded;
}
.demo-startAnim .demo-content .demo-listBox {
margin-top: 10px;
}
.demo-startAnim .demo-content .demo-listBox > ul > li {
float: left;
width: 47.5%;
overflow: hidden;
}
.demo-startAnim .demo-content .demo-listBox > ul > li:last-child {
margin-left: 5%;
}
.demo-startAnim .demo-content .demo-listBox .demo-list .title {
height: 25px;
background: #cacaca;
overflow: hidden;
}
.demo-startAnim .demo-content .demo-listBox .demo-list .title:before {
width: 50%;
height: 5px;
background: #ebeded;
margin: 10px auto;
}
.demo-startAnim .demo-content .demo-listBox .demo-list ul li {
height: 20px;
background: #ebeded;
border-bottom: 1px solid #cacaca;
overflow: hidden;
padding: 5px 15px;
}
.demo-startAnim .demo-content .demo-listBox .demo-list ul li:before {
width: 20px;
height: 10px;
background: #cacaca;
float: left;
}
.demo-startAnim .demo-content .demo-listBox .demo-list ul li:after {
width: 60%;
height: 5px;
background: #cacaca;
float: left;
margin-left: 10px;
margin-top: 2px;
}
.demo-startAnim .demo-content .demo-kp {
margin: 10px auto;
}
.demo-startAnim .demo-content .demo-kp ul li {
display: inline-block;
width: 30%;
height: 30px;
background: #cacaca;
color: #ebeded;
text-align: left;
padding: 10px;
margin-right: calc(1%);
}
.demo-startAnim .demo-content .demo-kp ul li:last-child {
margin-right: 0%;
}
.demo-startAnim .demo-content .demo-kp ul li:after {
width: 60%;
height: 5px;
background: #ebeded;
float: left;
margin-top: 2px;
}
.demo-startAnim .demo-content .demo-kp ul li:before {
background: #ebeded;
float: left;
width: 10px;
height: 10px;
margin-right: 10%;
}
.demo-startAnim .demo-footer {
margin-top: 10px;
background: #cacaca;
height: 30px;
float: left;
width: 100%;
display: table;
}
.demo-startAnim .demo-footer:before {
width: 60%;
height: 5px;
background: #ededed;
margin: 5px auto 0;
}
.demo-startAnim .demo-footer:after {
width: 30%;
height: 5px;
background: #ededed;
margin: 5px auto;
}
.demo-startAnim .demo-header ul li:before,
.demo-startAnim .demo-content .demo-kp ul li:before,
.demo-startAnim .demo-content .demo-kp ul li:after,
.demo-startAnim .demo-content .demo-listBox .demo-list .title:before,
.demo-startAnim .demo-content .demo-listBox .demo-list ul li:before,
.demo-startAnim .demo-content .demo-listBox .demo-list ul li:after,
.demo-startAnim .demo-footer:before,
.demo-startAnim .demo-footer:after {
display: block;
content: "";
}
</style>
components/enter-animation/index.jsx
浏览文件 @ 8f1a616b
......@@ -6,3 +6,4 @@ export default class AntEnterAnimation extends React.Component {
return <EnterAnimation {...this.props} />;
}
}
AntEnterAnimation.to = EnterAnimation.to;
components/enter-animation/index.md
浏览文件 @ 8f1a616b
......@@ -3,6 +3,7 @@
- order: 11
- category: Components
- chinese: 进场动画
- cols: 1
---
......@@ -10,9 +11,41 @@
## 何时使用
当页面分为几个明显的区块时，用一组进场动画渐进载入各个区块，使页面转场更加流畅和舒适，
提高整体视觉效果和产品的质感。
1.从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。
2.小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，使页面转场更加流畅和舒适，提高整体视觉效果和产品的质感。
## API
动画默认`right`
### EnterAnimation标签下：
|参数 |类型 |默认值 |详细 |
|-----------------|-------|-------------|----------------------------------------------------|
|type |string |right |执行动画的内置参数 |
|style |string |null |同上，style的样式动画,`type`有值，此项无效|
|delay |number |0 |整个区块的延时，以秒为单位|
|interval |number |0.1 |递增延时值，以秒为单位|
### dom子标签下：
|参数 |类型 |默认值 |详细 |
|-----------------|-------|-----------|----------------------------------------------------|
|enter-data |object | right |子标签动画参数|
#### enter-data参数列表
|参数 |类型 |默认值 |详细 |
|-----------------|-----------------|----------------|----------------------------------------------------|
|type |string |right |内置动画样式：<br/> `alpha` `left` `right` `top` `bottom` `scale` `scaleFrom` `scaleX` `scaleY`;|
|style |string |null |style样式，如transform: translateX(100px),每个样式必须以;结束；`type`有值此项无效|
|direction |string |"enter" |动画进场或出场样式,以 `enter` `leave`两值;默认为 `enter`|
|duration |number |0.5 |动画的时间,以秒为单位|
|ease |string |cubic-bezier(0.165, 0.84, 0.44, 1)|样式缓动，只支持css样式缓动|
|delay |number |0 |动画的延时，依照结构递增以上的`interval`|
|queueId |number |0 |动画的线程|
注：如子节点有 `enter-data` 值，则只执行有 `enter-data` 的节点的动画，相反所有子节点上都没有 `enter-data` 值，则执行遍历dom下一级节点来执行动画。
如果标签上的 `enter-data` 没 `type` || `style` ，则执行 `EnterAnimation` 标签上的 `type` || `style`。
package.json
浏览文件 @ 8f1a616b
......@@ -32,7 +32,7 @@
],
"license": "MIT",
"dependencies": {
"enter-animation": "^0.1.0",
"enter-animation": "~0.1.1",
"gregorian-calendar": "~3.0.0",
"gregorian-calendar-format": "~3.0.1",
"object-assign": "~3.0.0",
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或