懒惰的过渡动画反应

Question

您好我正在使用React渲染一些列表。我通过xhr接收数据并显示这些数据。部分数据显示某种进度条。 这是由div元素完成的，它获得内联宽度样式。

在css中，对宽度的更改将导致这些更改被设置为动画。然而，由于它与DOM的其余部分同时呈现，因此不会在第一次渲染时生成动画。作为一种解决方法，我确实使用了超时。

我想知道我是否可以在这件事上做得更好，因为我认为超时不是一个好习惯。我宁愿使用任何类型的事件触发行为。 STH。喜欢“渲染后”或类似的东西。有什么想法吗？

class Container extends React.Component {

componentDidMount() {

    let maxPts = 0;
    const persons = fetchPersons();

    persons.forEach(function (person) {
        maxPts = Math.max(maxPts, person.Pts || 0);
    });

    this.setState({
        data: athletes,
        dataAccepted: true
    });

    // TODO: Is that a good practice? Causes the width to be set later on to allow a transition
    window.setTimeout(() => {
        this.setState({
            max: maxPts
        });
    }, 250);
}

render() {
    return (
        <View>
            <Presenter max={this.state.max} persons={this.state.data}/>
        </View>
    );
}

}