javascript - React CSSTransitionGroup 不应用类

Question

我一定错过了什么。我已经查找了如何执行此操作的各种示例，但我无法让我的示例工作。我只需要将一个元素转入或转出。

我正在调用 togglePopup() 来翻转状态中的 bool 值，这会正确显示/隐藏 div.popup-msg 但转换类不会被应用，并且，显然，该元素不会转入或转出。

编辑:我尝试将弹出窗口移动到其自己的组件中，认为问题可能在于它位于无状态功能组件内部，而不是直接位于 render() 中。还是没有运气。

togglePopup = () => {
  let isPopupVisible = this.state.isPopupVisible;
  isPopupVisible = !isPopupVisible;
  this.setState({ isPopupVisible });
};

render() {
  const Main = () => {
    let removePopup = this.state.isPopupVisible 
      ? <div key={1} className="popup-msg">List has Been Removed</div>
      : null;

    return (
      <div className="main-wrapper">
        <CSSTransitionGroup
          transitionName="popup"
          transitionEnterTimeout={700}
          transitionLeaveTimeout={500}>
            {removePopup}
        </CSSTransitionGroup>
      </div>
    )
  };

  return (
      <div className="app-wrapper">
        <Route exact path="/" component={Main}/>
      </div>
  )

}

SASS:

.popup-enter {
  transition: opacity 700ms ease-in;
  opacity: 0.01;

  &.popup-enter-active {
    opacity: 1;
  }
}

.popup-leave {
  transition: opacity 500ms ease-in;
  opacity: 1;

  &.popup-leave-active {
    opacity: 0.01;
  }
}

Answer 1

好的，发现问题是由于弹出窗口位于另一个组件内造成的。所以我猜当状态更新时，父组件会重新渲染，并且不会显示任何过渡效果。不确定为什么会发生这种情况，因为没有影响父组件的状态更改。

将弹出窗口移到组件外部解决了该问题。