Можно ли использовать CSSTransitionGroup для анимации двумя различными способами в зависимости от состояния?

Question

Сценарий таков: я хотел бы анимировать серию похожих на Google карт в разных направлениях в зависимости от того, нажимает ли пользователь "следующий" или "предыдущий".

Анимации в одном направлении легко с 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
        }
    }
}