类添加/删除动画

Question

我正在添加/删除基于状态更改的类（我无法修改的bootstrap col类）。如何在ReactJs中动画转换？

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

Answer 1

由于bootstrap的cols基于带有百分比值的CSS宽度，您可以使用普通的CSS过渡来设置宽度变化的动画。

在CSS中添加一个包含转换的类：

.animateTransition {
    transition: width 1s;
}

将该类应用于您的元素：

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