reactjs - 是否可以使用CSSTransitionGroup以两种不同的方式设置动画，具体取决于状态？

场景是:我想根据用户单击“下一个”还是“上一个”，以不同方向为一系列类似Google的即时贴设置动画。

使用CSSTransitionGroup可以轻松地在一个方向上进行动画处理-我使用“下一个”按钮触发当前卡向上滑动并消失(下一卡从下方向上滑动)。

但是，我还希望“上一个”按钮为相反的过渡设置动画，即使当前卡向下滑动(而前一张卡向下滑动)。

问题的症结在于CSSTransitionGroup应该保持挂载状态。我可以轻松地获得类似<CSSTransitionGroup transitionName={this.state.isForward ? 'animate-forward' : 'animate-back'}的内容，并具有下一个/上一个按钮调用setState({isForward: ...})，但这似乎不起作用，可能是因为CSSTransitionGroup必须重新渲染。

我正在描述的CSSTransitionGroup有可能吗？

最佳答案

是的，但不是通过更改过渡名称，而是通过在每个方向上用不同的类包装所有过渡名称来实现:

如果说，卡片从左侧送入并出现在中间，而在右侧被解散。

JSX:

<div className={"wrapper" + animationDirection} >
    <ReactCSSTransitionGroup
        transitionName="card"
        transitionEnterTimeout={200}
        transitionLeaveTimeout={200}>
        {cards}
    </ReactCSSTransitionGroup>
</div>

SCSS:

.wrapper.adding-cards {
    .card {
        &.card-enter {
            // set to left position
        }

        &.card-enter.card-enter-active {
            // set to center position
        }

        &.card-leave-active {
            // set to right position
        }
    }
}

.wrapper.removing-cards {
    .card {
        &.card-enter {
            // set to right position
        }

        &.card-enter.card-enter-active {
            // set to center position
        }

        &.card-leave-active {
            // set to left position
        }
    }
}