React JS更改类与转换

Question

我正在使用ReactJS构建网站。在我的页面上，我有一个内容部分以及一个侧边栏。

当我点击一个按钮应切换侧边栏。目前，我正在将bootstrap中的内容类别从col-md-9更改为col-md-12，并将属性hidden设置为边栏。

但是现在，我想添加一些类似淡入淡出和淡入淡出边界并增加内容大小的转换。我不知道如何添加这些转换，因为我正在更改类。

你能告诉我我必须做什么吗？

Answer 1

您可以使用CSS。看看animate.css

https://daneden.github.io/animate.css/

Answer 2

您可以通过更改类使用CSS过渡。这里是例如两个clsses，会做的动画渐变的：

.fade-in { 
    opacity: 0; 
    transition: opacity 400ms; 
} 


.fade-out { 
    opacity: 1; 
    transition: opacity 400ms; 
} 

但是它不会随着hidden Bootstrap类名的工作，因为它设置display属性none值。为了使其工作，您可以使用fade-in类名称而不是hidden和fade-out，当侧导航应该变得可见