使用转换来反应JS更改类

Question

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

当我点击按钮时，应该切换侧边栏。目前，我正在将内容类从引导程序中的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