javascript - React 中状态变化的动画

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。