鍍金池/ 問答/HTML5  HTML/ react 動(dòng)態(tài)渲染內(nèi)容的動(dòng)畫問題

react 動(dòng)態(tài)渲染內(nèi)容的動(dòng)畫問題

react 在進(jìn)行條件渲染的時(shí)候使用的是:

{
    this.state.show ? <View/> : null
}

當(dāng)觸發(fā)條件的時(shí)候，才渲染內(nèi)容，否則不渲染，不通過 display:none 控制。

這種時(shí)候，如果需要做過渡動(dòng)畫應(yīng)該怎么實(shí)現(xiàn)？

嘗試過程中，發(fā)現(xiàn)，DOM會(huì)直接顯示，而跳過動(dòng)畫效果。### 問題描述

回答
編輯回答
鐧簞噯

雖然沒有寫代碼實(shí)現(xiàn)，我認(rèn)為可以嘗試用div再包裝1層，然后把過渡動(dòng)畫放在這個(gè)div上：

<div className={ this.state.show ? "animate-wrap active down-in" : "animate-wrap"}>
    { this.state.show ? <View/> : null }
</div>
2017年9月29日 15:00