css - 在 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。

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