Seeking advice on implementing a transition with react and css. The goal is to apply a class to the span element to achieve the desired animation effect – see illustration below.
Curious to know whether the issue lies in the css implementation or the javascript logic.
class TransitionComponent extends React.Component {
state = {
class: null
};
componentDidMount() {
this.setState({
class: "active"
});
}
render() {
return (
<div className="animation-container">
<span className={this.state.class ?
"animation" :
`${this.state.class} animation`}/>
</div>
);
}
}
const containerElement = document.getElementById("container");
ReactDOM.render(<TransitionComponent />, containerElement);.animation-container {
border: 0;
height: 4px;
position: relative;
background: blue;
}
.animation {
-webkit-transition: width 2s; /* Safari */
transition: width 5s;
width: 0%;
}
.animation.active {
width: 100%;
}<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="container"></div>