mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 06:03:38 +08:00
updata
This commit is contained in:
jljsj
parent
fbb7a99a9e
commit
fe0ea83ebd
@ -1,76 +1,73 @@
|
||||
# 基本(子节点控制进场)
|
||||
|
||||
- order: 0
|
||||
|
||||
模拟页面demo，子节点控制进场。`EnterAnimation` 里延时1秒`enter-data` 用到的参数：`type` `queueId` `delay`。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
|
||||
var EnterAnimation = antd.EnterAnimation;
|
||||
var Test = React.createClass({
|
||||
render() {
|
||||
return (
|
||||
<EnterAnimation className="demo-startAnim" delay={1}>
|
||||
<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 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 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" style={{"width": "100%", "display": "table", "float": "left"}} enter-data={{type:'bottom',queueId:1}}></div>
|
||||
</EnterAnimation>)
|
||||
<div className="demo-footer" enter-data={{type:'bottom',queueId:1}}></div>
|
||||
</EnterAnimation>
|
||||
)
|
||||
}
|
||||
});
|
||||
React.render(<Test/> , document.getElementById('components-enter-animation-demo-basic'));
|
||||
|
||||
````
|
||||
<style>
|
||||
.demo-startAnim {
|
||||
@ -203,6 +200,7 @@ React.render(<Test/> , document.getElementById('components-enter-animation-demo-
|
||||
height: 30px;
|
||||
float: left;
|
||||
width: 100%;
|
||||
display: table;
|
||||
}
|
||||
.demo-startAnim .demo-footer:before {
|
||||
width: 60%;
|
||||
|
||||
@ -1,76 +1,73 @@
|
||||
# 主标签控制动画
|
||||
|
||||
- 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}>
|
||||
<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 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>
|
||||
<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>
|
||||
</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>
|
||||
<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" style={{"width": "100%", "display": "table", "float": "left"}}></div>
|
||||
</EnterAnimation>)
|
||||
<div className="demo-footer"></div>
|
||||
</EnterAnimation>
|
||||
)
|
||||
}
|
||||
});
|
||||
React.render(<Test/> , document.getElementById('components-enter-animation-demo-label'));
|
||||
|
||||
````
|
||||
<style>
|
||||
.demo-startAnim {
|
||||
@ -203,6 +200,7 @@ React.render(<Test/> , document.getElementById('components-enter-animation-demo-
|
||||
height: 30px;
|
||||
float: left;
|
||||
width: 100%;
|
||||
display: table;
|
||||
}
|
||||
.demo-startAnim .demo-footer:before {
|
||||
width: 60%;
|
||||
@ -227,5 +225,4 @@ React.render(<Test/> , document.getElementById('components-enter-animation-demo-
|
||||
display: block;
|
||||
content: "";
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -15,7 +15,6 @@
|
||||
|
||||
2.小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，使页面转场更加流畅和舒适，提高整体视觉效果和产品的质感。
|
||||
|
||||
|
||||
## API
|
||||
|
||||
动画默认`right`
|
||||
@ -39,7 +38,7 @@
|
||||
|
||||
|参数 |类型 |默认值 |详细 |
|
||||
|-----------------|-----------------|----------------|----------------------------------------------------|
|
||||
|type |string |right |内置动画样式：<br/>`left` `right` `top` `bottom` `scale` `scaleFrom` `scaleX` `scaleY`;|
|
||||
|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 |动画的时间,以秒为单位|
|
||||
@ -47,7 +46,6 @@
|
||||
|delay |number |0 |动画的延时，依照结构递增以上的`interval`|
|
||||
|queueId |number |0 |动画的线程|
|
||||
|
||||
|
||||
注：如子节点有 `enter-data` 值，则只执行有 `enter-data` 的节点的动画，相反所有子节点上都没有 `enter-data` 值，则执行遍历dom下一级节点来执行动画。
|
||||
|
||||
如果标签上的 `enter-data` 没 `type` || `style` ，则执行 `EnterAnimation` 标签上的 `type` || `style`。
|
||||
|
||||
Loading…
Reference in New Issue
Block a user