Question

在我的React应用程序中，我有一个菜单，其中包含每个项目的子菜单。只要单击该项目，子菜单就会滑入。发生这种情况时，菜单标题也会更改。我想为标题更改设置动画，以便有一个平滑的淡入淡出效果。考虑一下React组件的render方法中的以下代码片段：

render() {
   // other code
   return(
     <div className={`title ${this.state.subMenu.isOpen ? `open` : ''}`}>
        <div>{this.state.heading}</div> // this heading changes when the sub-menu opens/renders
     </div>
  )
}

CSS：

@keyframes fade {
    0%,100% { opacity: 1 }
    50% { opacity: 0 }
}

.title {
   background : black;
   color : white;
}

.title.open {
   animation: fade 500ms ease-in-out;
}

此方法的问题在于，在状态更改后重新渲染组件之后，将应用open类，因此动画在渲染新的标题之后开始。这样会产生闪烁效果。但是，我希望动画在状态更改开始后立即开始。为此，我查看了react-transition-group，但似乎没有为这种情况提供所需的解决方案。在下面的代码中，CSSTransition要求从DOM装载和卸载其子代。在此期间，只有DOM元素的值（标题）会更改。

<CSSTransition
    in={this.state.subMenu.isOpen}
    timeout={500}
    classNames="open">
    <div className={`title ${subMenu.isOpen ? `open` : ''}`}>
        <div>{this.state.heading}</div> // heading changes when the sub-menu opens
    </div>
</CSSTransition>

有没有一种方法可以达到预期的效果？

Answer 1

您可以使用getSnapshotBeforeUpdate，详细了解here。

但是，如果您不能使用它，可以使用componentDidUpdate，如果您希望在任何状态更改后产生副作用。

在React中对状态变化进行动画处理

1 个答案: