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

Question

The scenario is: I'd like to animate a series of google-now-like cards in different directions depending on whether the user clicks "next" or "previous".

Animations in one direction is easy with CSSTransitionGroup - I'm having the "next" button trigger the current card to slide up and disappear (and the next card to slide up from below).

However, I also want the "previous" button to animate the opposite transition, namely for the current card to slide down (and the previous card to slide down).

The crux of the issue is that CSSTransitionGroup is supposed to stay mounted. I could easily have something like <CSSTransitionGroup transitionName={this.state.isForward ? 'animate-forward' : 'animate-back'} and have the next/previous buttons call setState({isForward: ...}), but that doesn't seem to work, likely because the CSSTransitionGroup would have to re-render.

Is what I'm describing possible with CSSTransitionGroup?

Answer 1

Yep, but not by changing the transition name, but rather by wrapping all of it with a different class per direction:

If say cards are being fed from the left and presented on the center, and dismissed on the right.

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