是否可以根据状态使用CSSTransitionGroup以两种不同的方式进行动画处理？

Question

场景是:我想根据用户是单击"下一个"还是"上一个",在不同方向为一系列类似谷歌的卡制作动画.

使用CSSTransitionGroup可以轻松实现一个方向的动画 - 我有"下一个"按钮触发当前卡片向上滑动并消失(下一张卡片从下方向上滑动).

但是,我还希望"上一个"按钮为相反的过渡设置动画,即当前卡片向下滑动(以及前一张卡片向下滑动).

问题的关键是CSSTransitionGroup应该保持挂载.我可以轻松地拥有类似的东西,<CSSTransitionGroup transitionName={this.state.isForward ? 'animate-forward' : 'animate-back'}并调用下一个/上一个按钮setState({isForward: ...}),但这似乎不起作用,可能是因为CSSTransitionGroup必须重新渲染.

我用CSSTransitionGroup描述的可能性是什么？

Answer 1

是的，但不是通过更改过渡名称，而是通过每个方向用不同的类包装所有过渡名称：

如果说卡片从左侧送入并在中间呈现，并在右侧被消除。

JSX：

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

社会保障体系：

.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
        }
    }
}