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

Question

场景是:我想根据用户点击“下一个”还是“上一个”，在不同的方向上制作一系列类似 google-now 的卡片的动画。

使用 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>

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