javascript - Lazy transition animations react -

hi using react render lists. receive data via xhr , display these. part of data displaying progress bar of kind. thats done div element, gets inline width style.

in css changes width cause these changes animated. since that's rendered simultenously alongside rest of dom, thats not animated on first render. workaround use timeout.

i wonder if better in matter, since consider timeouts not being practice. i'd rather prefer using kind of event triggered behavior. sth. "after render" or similar things. thoughts?

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: practice? causes width set later on allow transition     window.settimeout(() => {         this.setstate({             max: maxpts         });     }, 250); }  render() {     return (         <view>             <presenter max={this.state.max} persons={this.state.data}/>         </view>     ); } 

}