休假时ReactCSSTransitionGroup动画

Question

我在React中创建了一个卡片动画，看起来在卡片出现时起作用，但是当它离开时，动画不起作用。以下是我的代码：

<ReactCSSTransitionGroup transitionName="taskAnimation" transitionAppear={true}
                                         transitionAppearTimeout={1500} transitionLeave={true}
                                         transitionLeaveTimeout={1500}>
                    <div className="task-card">
                        <div className="box">
                            <div className="task-photo">
                                <figure className="task-photo-figure">
                                    <img src="../../img/icon.png" className="round-photo"/>
                                </figure>
                            </div>
                            <div className="task-description">
                                <h3>{this.props.task.taskName}</h3>
                                <h3>{this.props.task.duration}</h3>
                            </div>
                            <div className="task-buttons">
                                <ul className="task-buttons-list">
                                    <li>
                                        <button className="btn view" onClick={this.detailTask.bind(this)}>View
                                            Details
                                        </button>
                                    </li>
                                    <li>
                                        <button className="btn start" onClick={this.startTask.bind(this)}>Start Task
                                        </button>
                                    </li>
                                    <li>
                                        <button className="btn remove" onClick={this.removeTask.bind(this)}>Remove
                                            Task
                                        </button>
                                    </li>
                                    <li>
                                        <button className="btn finish" onClick={this.finishTask.bind(this)}>Finish
                                            Task
                                        </button>
                                    </li>
                                </ul>
                            </div>
                            <div className="task-countdown">
                                <div className="row">
                                    <div className="col span-1-of-3">
                                        <h5>Hours</h5>
                                        <span className="hours" ref={"hours"}>2</span>
                                    </div>
                                    <div className="col span-1-of-3">
                                        <h5>Minutes</h5>
                                        <span className="minutes" ref={"minutes"}>27</span>
                                    </div>
                                    <div className="col span-1-of-3">
                                        <h5>Seconds</h5>
                                        <span className="seconds" ref={"seconds"}>3</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br/>
                    {this.state.startMessage ? <p>{this.state.startMessage}</p> :
                        null}
                    {this.state.finishMessage ? <p>{this.state.finishMessage}</p> :
                        null}
                </ReactCSSTransitionGroup>

以下是动画的css文件：

.taskAnimation-leave {
opacity: 1;
}

.taskAnimation-leave.taskAnimation-leave-active {
animation-name: slideOutRight;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
}

@keyframes slideOutRight {
0% {
opacity: 1;
/* from left to right */
transform: translateX(+5rem);
}
50% {
transform: translateX(+5rem);
opacity: 0.5;
}
100% {
opacity: 0.1;
}
}

.taskAnimation-appear {
opacity: 0.01;
}

.taskAnimation-appear.taskAnimation-appear-active {
animation-name: moveInLeft;
animation-duration: 1.5s;
/*animation-delay:2s;*/
animation-timing-function: ease-in-out;
}
@keyframes moveInLeft {
0% {
opacity: 0;
/* from left to right */
transform: translateX(-10rem);
}
50% {
transform: translateX(+5rem);
opacity: 0.5;
}
100% {
opacity: 1;
transform: translate(0);
}
}

我搜索了stackoverflow，似乎很多人遇到了同样的问题。我尝试了一切，但我无法想出解决方案。