Keyframes animation running on page load in React app - css

Question

I'm learning React - and even though I don't think this is a React problem - I have created an onClick animation for a menu button, which works, but the animation is running when the page first loads. How can I prevent the animation from running the page initially loads.
I've tried most of the css solutions found on SE, like this one, but none of them are working. Which makes me believe that there may be an issue with my react code.
class NavButton extends Component{
constructor(props) {
super(props);
this.state = {
value: false
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState( { value : !this.state.value } );
}
render(){
return (
<div>
<div id="mobile-nav-menu" onClick={this.handleClick}>
<div id="nav-toggle" className="nav-toggle-white"><span></span></div>
</div>
<div id="index-mobile-navigation-container" className={this.state.value ? "width" :"width2"}>
<div id="index-mobile-navigation">
Blog
</div>
</div>
</div>
);
}
}
export default NavButton
#index-mobile-navigation-container {
height: 100%;
background-color: #87c0c4;
z-index: 1;
position: absolute;
right: 0%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
width: 0px;
}
#index-mobile-navigation {
position: absolute;
top: 100px;
left: 40px;
font-size: 25px;
font-family: "Rubik";
color: #FFFFFF;
}
#index-mobile-navigation:hover {
cursor: pointer;
}
.width {
animation: 1s in-out forwards;
-webkit-animation: 1s in-out forwards;
}
.width2 {
animation: 1s out forwards;
-webkit-animation: 1s out forwards;
}
#keyframes in-out {
0% {
width: 0;
}
100% {
width: 400px;
}
}
#keyframes out {
0% {
width: 400px;
}
100% {
width: 0px;
}
}

Answer 1

You can set the animation class after the action is performed.
In the current problem you are setting width2 animation onload, Because you are evaluating against this.state.value onload. A simple solution in your case is you can introduce an optional state where the value is undefined or null and then toggle the class based on action.
this.state = {
value: ""
};
getToggleClass = () => {
if (this.state.value === "") {
return "";
} else {
return this.state.value ? "width" : "width2";
}
};
<div
id="index-mobile-navigation-container"
className={this.getToggleClass()}
>
I don't know what is the animation you are trying to achieve.
But I have attached a code-sandbox link, with the above snippet. see if it helps
https://codesandbox.io/s/funny-stonebraker-o0sl1