mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 11:10:01 +08:00
add enterAnimation
This commit is contained in:
jljsj
parent
7aa01c464e
commit
87c68279e1
@ -1,51 +1,295 @@
|
||||
# 基本
|
||||
# 基本(子节点控制进场)
|
||||
|
||||
- order: 0
|
||||
|
||||
第一个对话框。
|
||||
模拟页面demo;子节点控制进场;`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" style={{"width": "100%", "display": "table", "float": "left"}} enter-data={{type:'bottom',queueId:1}}></div>
|
||||
</EnterAnimation>)
|
||||
}
|
||||
});
|
||||
React.render(<Test/> , document.getElementById('components-enter-animation-demo-basic'));
|
||||
|
||||
React.render(<Test/> , document.getElementById('components-modal-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%;
|
||||
}
|
||||
.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: "";
|
||||
}
|
||||
a.logo {
|
||||
float: left;
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
margin: 17px 45px;
|
||||
transition: margin 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), width 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), height 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
text-transform: uppercase;
|
||||
font-size: 18px;
|
||||
font-family: "Raleway", "Helvetica Neue", Helvetica, "Lantinghei SC", "Microsoft YaHei", "微软雅黑", "Hiragino Sans GB", SimSun, sans-serif;
|
||||
font-weight: 500;
|
||||
color: #6EB4E0;
|
||||
}
|
||||
a.logo img {
|
||||
float: left;
|
||||
-webkit-animation: rotateCircleBack 0.6s 1 ease-in-out;
|
||||
animation: rotateCircleBack 0.6s 1 ease-in-out;
|
||||
}
|
||||
.test {
|
||||
opacity: 0;
|
||||
-webkit-animation: TTest 0.5s ease-out;
|
||||
animation: TTest 0.5s ease-out;
|
||||
}
|
||||
@-webkit-keyframes TTest {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
0%,
|
||||
100% {
|
||||
-webkit-transform: translateX(0px);
|
||||
transform: translateX(0px);
|
||||
}
|
||||
20%,
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateX(30px);
|
||||
transform: translateX(30px);
|
||||
}
|
||||
40%,
|
||||
80% {
|
||||
-webkit-transform: translateX(-30px);
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
}
|
||||
@keyframes TTest {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
0%,
|
||||
100% {
|
||||
-webkit-transform: translateX(0px);
|
||||
transform: translateX(0px);
|
||||
}
|
||||
20%,
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateX(30px);
|
||||
transform: translateX(30px);
|
||||
}
|
||||
40%,
|
||||
80% {
|
||||
-webkit-transform: translateX(-30px);
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
295
components/enter-animation/demo/label.md
Normal file
295
components/enter-animation/demo/label.md
Normal file
@ -0,0 +1,295 @@
|
||||
# 主标签控制动画
|
||||
|
||||
- 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" style={{"width": "100%", "display": "table", "float": "left"}}></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%;
|
||||
}
|
||||
.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: "";
|
||||
}
|
||||
a.logo {
|
||||
float: left;
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
margin: 17px 45px;
|
||||
transition: margin 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), width 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), height 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
text-transform: uppercase;
|
||||
font-size: 18px;
|
||||
font-family: "Raleway", "Helvetica Neue", Helvetica, "Lantinghei SC", "Microsoft YaHei", "微软雅黑", "Hiragino Sans GB", SimSun, sans-serif;
|
||||
font-weight: 500;
|
||||
color: #6EB4E0;
|
||||
}
|
||||
a.logo img {
|
||||
float: left;
|
||||
-webkit-animation: rotateCircleBack 0.6s 1 ease-in-out;
|
||||
animation: rotateCircleBack 0.6s 1 ease-in-out;
|
||||
}
|
||||
.test {
|
||||
opacity: 0;
|
||||
-webkit-animation: TTest 0.5s ease-out;
|
||||
animation: TTest 0.5s ease-out;
|
||||
}
|
||||
@-webkit-keyframes TTest {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
0%,
|
||||
100% {
|
||||
-webkit-transform: translateX(0px);
|
||||
transform: translateX(0px);
|
||||
}
|
||||
20%,
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateX(30px);
|
||||
transform: translateX(30px);
|
||||
}
|
||||
40%,
|
||||
80% {
|
||||
-webkit-transform: translateX(-30px);
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
}
|
||||
@keyframes TTest {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
0%,
|
||||
100% {
|
||||
-webkit-transform: translateX(0px);
|
||||
transform: translateX(0px);
|
||||
}
|
||||
20%,
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateX(30px);
|
||||
transform: translateX(30px);
|
||||
}
|
||||
40%,
|
||||
80% {
|
||||
-webkit-transform: translateX(-30px);
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -6,3 +6,4 @@ export default class AntEnterAnimation extends React.Component {
|
||||
return <EnterAnimation {...this.props} />;
|
||||
}
|
||||
}
|
||||
AntEnterAnimation.to = EnterAnimation.to;
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
- order: 11
|
||||
- category: Components
|
||||
- chinese: 进场动画
|
||||
- cols: 1
|
||||
|
||||
---
|
||||
|
||||
@ -10,9 +11,43 @@
|
||||
|
||||
## 何时使用
|
||||
|
||||
当页面分为几个明显的区块时，用一组进场动画渐进载入各个区块，使页面转场更加流畅和舒适，
|
||||
提高整体视觉效果和产品的质感。
|
||||
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/>`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 |动画的延时;默认0,依照结构递增以上的`interval`|
|
||||
|queueId |number |0 |动画的线程|
|
||||
|
||||
|
||||
注：如子节点有`enter-data`值，则只执行有`enter-data`的节点的动画，相反所有子节点上都没有`enter-data`值，则执行遍历dom下一级节点来执行动画;
|
||||
|
||||
如果标签上的`enter-data`没`type`||`style`，则执行`EnterAnimation`标签上的`type`||`style`;
|
||||
|
||||
@ -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",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user