Question

我一定错过了什么。我已经查找了各种如何做到这一点的例子，但我不能让我的工作。我只需要将一个元素转换成一个元素。

我正在调用togglePopup()来触发boolean in状态，这正确地显示/隐藏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

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

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

React CSSTransitionGroup不应用类

1 个答案: