Question

我有一个在10秒后卸载的组件，而我似乎无法使用React CSSTransitionGroup获得离开动画。当组件安装并且这些动画运行良好时，会添加显示的类。但是，离开类永远不会在卸载时添加到组件中。我找到了几个有用的jsfiddle示例，但代码对我不起作用。我是React的新手，所以我希望有人可以指出我正确的方向。我设置了超时，以便能够查看是否添加了类。

主要组成部分：

this.state = {
renderBlankSlate: true,
//the rest of the initial state..
}

// This unmounts the component
componentDidMount() {
    this.interval = setTimeout(() => this.setState({renderBlankSlate: false}), 10000);
}

{ this.state.renderBlankSlate ? 
                <ReactCSSTransisionGroup 
                    component="div"
                    transitionName="slide"
                    transitionEnterTimeout={ 500 } 
                    transitionAppear={ true }
                    transitionAppearTimeout={ 2000 }
                    transitionLeaveTimeout={ 5000 }
                >
                    <BlankSlate />
                </ReactCSSTransisionGroup>
                 : null }

CSS：

.slide-appear {
transform: translateX(110%);
height: 0;
opacity: 0;
}
.slide-appear.slide-appear-active {
transform: translateX(0);
height: 100%;
opacity: 1;
transition: all 2s ease-in;
}

.slide-leave {
transform: translateX(0);
}
.slide-leave.slide-leave-active {
transform: translateX(110%);
transition: 5s ease-in;
}

Answer 1

您可能希望在转换组中添加该三元组。

<ReactCSSTransitionGroup 
  component="div"
  transitionName="slide"
  transitionEnterTimeout={ 500 } 
  transitionAppear={ true }
  transitionAppearTimeout={ 2000 }
  transitionLeaveTimeout={ 5000 }
>
  {this.state.renderBlankSlate ? <BlankSlate /> : null}
</ReactCSSTransitionGroup>

你的离开动画未被触发的原因是因为过渡组也离开了

React CSSTransitionGroup不添加离开类

1 个答案: