React為動畫提供一個(gè)ReactTransitonGroup
插件組件作為一個(gè)底層的API,一個(gè)ReactCSSTransitionGroup
來簡單地實(shí)現(xiàn)基本的CSS動畫和過渡。
ReactCSSTransitionGroup
ReactCSSTransitionGroup
是基于ReactTransitionGroup
的,在React組件進(jìn)入或者離開DOM的時(shí)候,它是一種簡單地執(zhí)行CSS過渡和動畫的方式。這個(gè)的靈感來自于優(yōu)秀的ng-animate庫。
ReactCSSTransitionGroup
是ReactTransitions
的接口。這是一個(gè)簡單的元素,包含了所有你對其動畫感興趣的組件。這里是一個(gè)例子,例子中我們讓列表項(xiàng)淡入淡出。
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var TodoList = React.createClass({
getInitialState: function() {
return {items: ['hello', 'world', 'click', 'me']};
},
handleAdd: function() {
var newItems =
this.state.items.concat([prompt('Enter some text')]);
this.setState({items: newItems});
},
handleRemove: function(i) {
var newItems = this.state.items;
newItems.splice(i, 1);
this.setState({items: newItems});
},
render: function() {
var items = this.state.items.map(function(item, i) {
return (
<div key={item} onClick={this.handleRemove.bind(this, i)}>
{item}
</div>
);
}.bind(this));
return (
<div>
<button onClick={this.handleAdd}>Add Item</button>
<ReactCSSTransitionGroup transitionName="example">
{items}
</ReactCSSTransitionGroup>
</div>
);
}
});
注意:
你必須為
ReactCSSTransitionGroup
的所有子級提供鍵
屬性,即使只渲染一項(xiàng)。這就是React確定哪一個(gè)子級插入了,移除了,或者停留在那里。
在這個(gè)組件當(dāng)中,當(dāng)一個(gè)新的項(xiàng)被添加到ReactCSSTransitionGroup
,它將會被添加example-enter
類,然后在下一時(shí)刻被添加example-enter-active
CSS類。這是一個(gè)基于transitionName
prop的約定。
你可以使用這些類來觸發(fā)一個(gè)CSS動畫或者過渡。例如,嘗試添加這段CSS代碼,然后插入一個(gè)新的列表項(xiàng):
.example-enter {
opacity: 0.01;
transition: opacity .5s ease-in;
}
.example-enter.example-enter-active {
opacity: 1;
}
你將注意到,當(dāng)你嘗試移除一項(xiàng)的時(shí)候,ReactCSSTransitionGroup
保持該項(xiàng)在DOM里。如果你正使用一個(gè)帶有插件的未壓縮的React構(gòu)建版本,你將會看到一條警告:React期待一次動畫或者過渡發(fā)生。那是因?yàn)?code>ReactCSSTransitionGroup保持你的DOM元素一直在頁面上,直到動畫完成。嘗試添加這段CSS代碼:
.example-leave {
opacity: 1;
transition: opacity .5s ease-in;
}
.example-leave.example-leave-active {
opacity: 0.01;
}
為了能夠給它的子級應(yīng)用過渡效果,ReactCSSTransitionGroup
必須已經(jīng)掛載到了DOM。下面的例子不會生效,因?yàn)?code>ReactCSSTransitionGroup被掛載到新項(xiàng),而不是新項(xiàng)被掛載到ReactCSSTransitionGroup
里。將這個(gè)與上面的快速開始部分比較一下,看看有什么差異。
render: function() {
var items = this.state.items.map(function(item, i) {
return (
<div key={item} onClick={this.handleRemove.bind(this, i)}>
<ReactCSSTransitionGroup transitionName="example">
{item}
</ReactCSSTransitionGroup>
</div>
);
}, this);
return (
<div>
<button onClick={this.handleAdd}>Add Item</button>
{items}
</div>
);
}
雖然在上面的例子中,我們渲染了一個(gè)項(xiàng)目列表到ReactCSSTransitionGroup
里,ReactCSSTransitionGroup
的子級可以是一個(gè)或零個(gè)項(xiàng)目。這使它能夠讓一個(gè)元素實(shí)現(xiàn)進(jìn)入和離開的動畫。同樣,你可以通過移動一個(gè)新的元素來替換當(dāng)前元素。隨著新元素的移入,當(dāng)前元素移出。例如,我們可以由此實(shí)現(xiàn)一個(gè)簡單的圖片輪播器:
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var ImageCarousel = React.createClass({
propTypes: {
imageSrc: React.PropTypes.string.isRequired
},
render: function() {
return (
<div>
<ReactCSSTransitionGroup transitionName="carousel">
<img src={this.props.imageSrc} key={this.props.imageSrc} />
</ReactCSSTransitionGroup>
</div>
);
}
});
如果你想,你可以禁用入場
或者出場
動畫。例如,有些時(shí)候,你可能想要一個(gè)入場
動畫,不要出場
動畫,但是ReactCSSTransitionGroup
會在移除DOM節(jié)點(diǎn)之前等待一個(gè)動畫完成。你可以給ReactCSSTransitionGroup
添加transitionEnter={false}
或者transitionLeave={false}
props來禁用這些動畫。
注意:
當(dāng)使用
ReactCSSTransitionGroup
的時(shí)候,沒有辦法通知你在過渡效果結(jié)束或者在執(zhí)行動畫的時(shí)候做一些復(fù)雜的運(yùn)算。如果你想要更多細(xì)粒度的控制,你可以使用底層的ReactTransitionGroup
API,該API提供了你自定義過渡效果所需要的函數(shù)。
ReactTransitionGroup
ReactTransitionGroup
是動畫的基礎(chǔ)。它可以通過React.addons.TransitionGroup
得到。當(dāng)子級被添加或者從其中移除(就像上面的例子)的時(shí)候,特殊的生命周期函數(shù)就會在它們上面被調(diào)用。
componentWillEnter(callback)
在組件被添加到已有的TransitionGroup
中的時(shí)候,該函數(shù)和componentDidMount()
被同時(shí)調(diào)用。這將會阻塞其它動畫觸發(fā),直到callback
被調(diào)用。該函數(shù)不會在TransitionGroup
初始化渲染的時(shí)候調(diào)用。
componentDidEnter()
該函數(shù)在傳給componentWillEnter
的callback
函數(shù)被調(diào)用之后調(diào)用。
componentWillLeave(callback)
該函數(shù)在子級從ReactTransitionGroup
中移除的時(shí)候調(diào)用。雖然子級被移除了,ReactTransitionGroup
將會使它繼續(xù)在DOM中,直到callback
被調(diào)用。
componentDidLeave()
該函數(shù)在willLeave
callback
被調(diào)用的時(shí)候調(diào)用(與componentWillUnmount
是同一時(shí)間)。
默認(rèn)情況下ReactTransitionGroup
渲染一個(gè)span
。你可以通過提供一個(gè)component
prop來改變這種行為。例如,以下是你將如何渲染一個(gè)<ul>
:
<ReactTransitionGroup component="ul">
...
</ReactTransitionGroup>
每一個(gè)React能渲染的DOM組件都是可用的。但是,組件
并不需要是一個(gè)DOM組件。它可以是任何你想要的React組件;甚至是你自己已經(jīng)寫好的!
注意:
v0.12之前,當(dāng)使用DOM組件的時(shí)候,
組件
prop需要是一個(gè)指向React.DOM.*
的引用。既然組件簡單地傳遞到了React.createElement
,它必須是一個(gè)字符串。組裝的組件必須傳遞構(gòu)造函數(shù)。
任何額外的、用戶定義的屬性將會成為已渲染的組件的屬性。例如,以下是你將如何渲染一個(gè)帶有css類的<ul>
:
<ReactTransitionGroup component="ul" className="animated-list">
...
</ReactTransitionGroup>