Keyframes animation running on page load in React app

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;
    }
}

your default state is false so "width2" animation is set on load. — karthick, Dec 16 '19 at 22:19
Ahh, right. Thanks. But isn't that what is required for toggling between states? — fellinlovewithaman, Dec 16 '19 at 22:27
Yes but after the page is loaded. Ideally you have to set the animation class on an action. so you add the animation class for the transition "width" on click and add the second animation transition "width2" — karthick, Dec 16 '19 at 22:38
Not related to the answer but just to give an overview the fiddle http://jsfiddle.net/bmh5g/12/ from https://stackoverflow.com/questions/18023859/possible-to-reverse-a-css-animation-on-class-removal — karthick, Dec 16 '19 at 22:40

karthick · Accepted Answer · 2019-12-16T23:17:35.740

0

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

edited Dec 16 '19 at 23:17

answered Dec 16 '19 at 22:56

karthick

11,998
6
56
88

Hi, thanks for this. Unfortunately the animation is still running on after the page is landed. What I'm trying to do is when the user clicks the button, the menu slides in, and when they click it again it slides out. But of course I don't want anything to happen when the page loads, only when the user clicks the button – fellinlovewithaman Dec 16 '19 at 23:13
edited the answer and codesandbox. just need to reverse the class and remove the optional css. – karthick Dec 16 '19 at 23:18

Keyframes animation running on page load in React app

1 Answers1