I am trying to create a transition using react and css. I want to add a class to the `span` to create the animation - See example below.

Does anyone know if the issue is with the css or my javascript.

```js
class App extends React.Component {
  state = {
    class: null
  };

  componentDidMount() {
    this.setState({
      class: "active"
    });
  }

  render() {
    return (
      <div className="progress-bar-container">
        <span
          className={this.state.class ? 
                     "progress-bar" : 
                     `${this.state.class} progress-bar`}
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```

```css
.progress-bar-container {
  border: 0;
  height: 4px;
  position: relative;
  background: red;
}

.progress-bar {
  -webkit-transition: width 2s; /* Safari */
  transition: width 5s;
  width: 0%;
}

.progress-bar.active {
  width: 100%;
}
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
```
['https://Stackoverflow.com/questions/51610180', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/4756106/']
You could use a different approach and append `active` class with `setTimeout` method.

```js
class App extends React.Component {
  state = {
    class: null
  };

  componentDidMount() {
    setTimeout(() => this.refs.progressBar.classList.add("active"), 100)
  }

  render() {
    return ( 
      <div className = "progress-bar-container" >
        <span className="progress-bar" ref="progressBar"/>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render( < App / > , rootElement);
```

```css
.progress-bar-container {
  border: 0;
  height: 4px;
  position: relative;
  background: red;
}

.progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: green;
  transition: width 5s;
  width: 0px;
}

.progress-bar.active {
  width: 100%;
}
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
```
You can use `requestAnimationFrame()` to trigger the transition on mount. I'd presume that doing this is more robust than relying on a `setTimeout()`.

```
componentDidMount() {
    requestAnimationFrame(() => {
        this.setState({
            class: "active"
        });
    });
}

```

Source: <https://www.pluralsight.com/guides/handling-componentdidmount-issue-css-transition>