淡出ReactCSSTransitionGroup不起作用

Question

因此，我尝试在15秒后淡出(过渡退出/离开)。淡入效果很好，但是淡出效果不好。为什么会这样呢？这是我的代码

{this.state.reachedRSS ? [

                Object.keys(this.state.items).map((key) =>
                    <div>
                        <ReactCSSTransitionGroup transitionName="example"
                            transitionAppear={true} transitionAppearTimeout={1000}
                            transitionEnter={false} transitionLeave={true}
                            transitionLeaveTimeout={1000}>

                            <h5><a href={this.state.link[key]}>{this.state.items[key]}</a></h5>
                            <h6>{this.state.description[key]}</h6>
                        </ReactCSSTransitionGroup>
                    </div>
                )
            ]
                : null}

            {
                this.state.reachedHTML ?
                    <ReactCSSTransitionGroup transitionName="example"
                        transitionAppear={true} transitionAppearTimeout={1000}
                        transitionEnter={false} transitionLeave={true}
                            transitionLeaveTimeout={1000}>
                        {<div dangerouslySetInnerHTML={{ __html: this.state.body }} />}
                    </ReactCSSTransitionGroup>
                    : null
            }

下面是我的CSS：

.example-appear {
  opacity: 0.01;
}
.example-appear.example-appear-active {
  opacity: 1;
  transition: opacity 1000ms ease-in;
}
.example-leave {
  opacity: 0.01;
}
.example-leave.example-leave-active {
  opacity: 1;
  transition: opacity 1000ms ease-in;
}

Answer 1

组件在动画化之前会先卸载

由于卸载是即时发生的，因此您的组件立即被替换为null。

您应该通过状态更改触发您的离开动画，然后在完成时卸载组件。