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