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

Question

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

上下文如下：

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

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

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

如何显式设置 CSS？ 这样我就可以恢复初始的 700px 高度，从而可以正确地重置动画。

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

Answer 1

您可以使用 componentDidUpdate 和 componentDidMount 方法以及对 div 的引用显式设置 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 文件中提供以下 classes:

.shrink-appear {
  height: 700px;
}

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

transition组的工作方式是先给需要动画的元素添加class shrink-appear，然后再添加shrink-appear-active，因为我们的transitionName是"shrink".

如果你想做一个离开动画，你可以通过向过渡组提供一个 transitionLeaveTimeout 并定义 2 个新的 classes 来实现，在我们的例子中它们是：

.shrink-leave {
  height: 0;
}

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

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

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

React.js set CSS attribute (similar to setState)

javascript

reactjs

velocity.js