Question

在React.js中，如何明确设置CSS？

以下是上下文：

我有一个以全高开始的条形图，然后从高处收缩（通过动画）到0px。见下图。

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

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

如何明确设置CSS？这将让我恢复初始的700px高度，这将允许动画正确重置。

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

Answer 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-active，因为我们的transitionName是＆＃34; shrink＆＃34;。

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

.shrink-leave {
  height: 0;
}

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

你可以看到假动画类与我们出现的动画相反，以提供相反的效果。

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

1 个答案: