React.js 设置 CSS 属性（类似于 setState）答案

【问题标题】：React.js set CSS attribute (similar to setState)React.js 设置 CSS 属性（类似于 setState）
【发布时间】：2016-08-27 07:35:45
【问题描述】：

在 React.js 中，如何显式设置 CSS？

这是上下文：

我有一个从全高开始的栏，然后（通过动画）缩小到 0px 的高度。见下图。

它在步骤 1-2-3 中正常工作。我应用动画将高度设置为 0。

但是，我无法从第 3 步过渡到第 4 步，因为高度已经为 0。（与第 1 步不同，高度为初始值 700 像素）。

如何显式设置 CSS？这将让我恢复初始 700 像素高度，从而可以正确重置动画。

注意：出于性能原因，我没有使用 jQuery。

【问题讨论】：

标签： javascript reactjs velocity.js

【解决方案1】：

您可以使用 componentDidUpdate 和 componentDidMount 方法以及 div 的 ref 显式设置 div 的 CSS 属性，如下所示：

endAnimation () {
  setTimeout(()=>{
     this.refs.animatedDiv.className = "newClassToReset"
  }, this.animationLength);
},
componentDidMout (){ 
  this.endAnimation();
},
componentDidUpdate (){
  this.endAnimation
}

但是，如果您使用 CSS 制作动画，最好使用官方的 ReactCSSTransitionGroups 插件，可以在此处找到： https://facebook.github.io/react/docs/animation.html

设置起来真的很容易，你的例子是这样的：

<ReactCSSTransitionGroup transitionName="shrink" transitionAppear={true} transitionAppearTimeout={500}>
  <div className="bar">Bar</div>
</ReactCSSTransitionGroup>

然后在您的 CSS 文件中提供以下类：

.shrink-appear {
  height: 700px;
}

.shrink-appear.shrink-appear-active {
  height: 0;
  transition: height 500ms ease-in;
}

过渡组的工作方式是首先将类shrink-appear 添加到需要动画的元素，然后另外添加shrink-appear-active，因为我们的transitionName 是“shrink”。

如果你想做一个离开动画，你可以通过向转换组提供一个 transitionLeaveTimeout 并定义 2 个新类来实现，在我们的示例中，这些类是：

.shrink-leave {
  height: 0;
}

.shrink-leave.shrink-leave-active {
  opacity: 700;
  transition: height 500ms ease-in;
}

如您所见，离开动画类与我们的出现动画相反，以提供相反的效果。

【讨论】：