Question

这是我想要做的事情的一小部分：https://jsfiddle.net/s7s07chm/7/

但是我想用反应而不是jquery来做这件事。基本上，我将元素的className放在状态中，并在componentDidMount上更新className以启动转换。

但这不起作用。该组件只是在转换状态下呈现。换句话说，它不是向下滑动，而是从头开始显示在底部

我这样做错了吗？如果是这样，还有另一种方法可以实现这一目标吗？

这里是实际代码

getInitialState: function() {
  return {
    childClass: 'child'
  };
},
componentDidMount: function() {
  this.setState({
    childClass: 'child low'
  });
},

Answer 1

无效的原因是因为在装入组件之前不会更新DOM。因此，您使用getInitialState分配的课程将永远不会出现在DOM中，但您使用componentDidMount设置的课程将会出现。正如Ray所说，你应该看看ReactCSSTransitionGroup。

Answer 2

在React将它们移交给浏览器之后调用

componentDidMount，但浏览器可能还没有完成绘制。

但是，您可以使用requestAnimationFrame来确保在浏览器完成绘制组件后调用setState。

componentDidMount() {
  requestAnimationFrame(() => this.setState({
    childClass: 'child low'
  }))
}

组件安装时反应css动画

2 个答案: