是否可以使用 CSSTransitionGroup 根据状态以两种不同的方式设置动画？

Question

场景是：我想根据用户点击的是 "next" 还是 "previous"，以不同的方向为一系列 google-now-like 卡片设置动画。

单向动画使用 CSSTransitionGroup 很容易 - 我让 "next" 按钮触发当前卡片向上滑动并消失（下一张卡片从下方向上滑动）。

不过，我还希望 "previous" 按钮能够为相反的过渡设置动画，即当前卡片向下滑动（以及上一张卡片向下滑动）。

问题的症结在于 CSSTransitionGroup 应该保持挂载状态。我可以很容易地拥有 <CSSTransitionGroup transitionName={this.state.isForward ? 'animate-forward' : 'animate-back'} 之类的东西，并让 next/previous 按钮调用 setState({isForward: ...})，但这似乎不起作用，可能是因为 CSSTransitionGroup 必须重新渲染。

CSSTransitionGroup 可以实现我所描述的内容吗？

Answer 1

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

如果说卡片从左侧进纸并在中间出示，然后在右侧取出。

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

是否可以使用 CSSTransitionGroup 根据状态以两种不同的方式设置动画？

Is it possible to use CSSTransitionGroup to animate in two different ways depending on state?

reactjs

reactcsstransitiongroup