在 React 应用程序中的页面加载时运行的关键帧动画

Question

我正在学习 React - 尽管我不认为这是一个 React 问题 - 我已经为菜单按钮创建了一个 onClick 动画，它可以工作，但动画在页面首次加载时正在运行。如何防止动画运行页面初始加载。

我已经尝试了大部分在 SE 上找到的 css 解决方案，like this one，但它们都不起作用。这让我相信我的反应代码可能存在问题。

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

可以在动作执行后设置动画类。

在当前问题中，您正在设置 width2 动画加载，因为您正在评估 this.state.value onload。在您的情况下，一个简单的解决方案是您可以引入一个可选状态，其中值未定义或为空，然后根据操作切换类。

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()}
    >

我不知道您要实现的动画是什么。 但是我附上了一个代码沙箱链接，上面有上面的 sn-p。看看有没有帮助

https://codesandbox.io/s/funny-stonebraker-o0sl1