添加/刪除類的動畫

Question

我正在添加/刪除一個基於狀態變化的類（我無法修改的引導類類）。這個轉換如何在ReactJs中生成動畫？

<div className={this.state.is_drawer_open ? 'col-xs-8' : 'col-xs-12'}> 

Answer 1

由於引導程序的列以CSS寬度和百分比值爲基礎，因此您可以使用普通的CSS轉換爲動畫寬度更改設置動畫。

在你的CSS添加類過渡：

.animateTransition { 
    transition: width 1s; 
} 

應用類的元素：

<div className={ `animateTransition ${this.state.is_drawer_open ? 'col-xs-8' : 'col-xs-12'}` }>