Transition
默認(rèn)展示組件某個特定狀態(tài)的樣式，而不是創(chuàng)建漸變動畫
例如：
<Transition
in={toggleShow}
timeout={1000}
unmountOnExit
>
{state=>(
<div>{state}</div>
)}
</Transition>
注意：子組件是函數(shù)（見下方children）
CSSTransition
展示組件從狀態(tài)到另一個狀態(tài)的動態(tài)變化嚎研，需要定義className和相關(guān)樣式
例如：
<CSSTransition
in={toggleShow}
className="fade"
timeout={300}
>
//子組件（需要動畫的組件）
</CSSTransition>
css中設(shè)置如下：
.fade-enter {
opacity: 0.01;
}
.fade-enter-active {
opacity: 1;
transition: opacity 300ms;
}
.fade-exit {
opacity: 1;
}
.fade-exit-active {
opacity: 0.01;
transition: opacity 300ms;
}
TransitionGroup
管理一些列組件的動畫蓖墅，例如列表
<ul>
<TransitionGroup>
{items.map(({ id, text }) => (
<CSSTransition
key={id}
timeout={500}
classNames="fade"
>
<li>{text}</li>
</CSSTransition>
))}
</TransitionGroup>
</ul>
常用屬性
- children
當(dāng)children是一個函數(shù)時库倘，接受一個參數(shù)state，state包含了內(nèi)部組件的transition狀態(tài)
'entering', 'entered', 'exiting', 'exited', 'unmounted'
- in
定義當(dāng)前組件的狀態(tài)(true為entered论矾，false為exited)
- unmountOnExit
當(dāng)狀態(tài)為exited的時候是否需要unmount
- timeout
定義transition間隔教翩，可以這么寫：
timeout={{
enter:300,
exit:300
}}
