codebox.css

.App {
  font-family: sans-serif;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.CardsContainer {
  height: 200px;
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.Card {
  position: absolute;
  border: 1px solid black;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 200px;
}

.ButtonsContainer {
  display: flex;
  justify-content: space-around;
  width: 300px;
}

.Button {
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
}

.Button--green {
  background: green;
}

.Button--red {
  background: red;
}

.Exit--right-enter {
  transform: translate(20%, 0);
}
.Exit--right-enter-active {
  transform: translate(0, 0);
  transition: transform 300ms;
}
.Exit--right-exit {
  transform: translate(0, 0);
}
.Exit--right-exit-active {
  transform: translate(20%, 0);
  transition: transform 300ms;
}

.Exit--left-enter {
  transform: translate(-20%, 0);
}
.Exit--left-enter-active {
  transform: translate(0, 0);
  transition: transform 300ms;
}
.Exit--left-exit {
  transform: translate(0, 0);
}
.Exit--left-exit-active {
  transform: translate(-20%, 0);
  transition: transform 300ms;
}

codebox.js

import React from "react";
import ReactDOM from "react-dom";
import produce from 'immer'
import { CSSTransition } from 'react-transition-group'

import "./styles.css";

class Card extends React.Component {
  componentDidUpdate() {
    const { exit, popCard } = this.props;
    if (exit) popCard();
  }

  render() {
    const { text } = this.props;
    return (
      <div className="Card">
        { text }
      </div>
    )
  }
}

class App extends React.Component {
  state = {
    exitDir: 'right',
    cards: [
      { key: 1, text: 'What is this?' },
      { key: 2, text: 'What is that?' },
      { key: 3, text: 'What is an alligator?' },
      { key: 4, text: 'What is blah?' },
      { key: 5, text: 'What is foo?' },
      { key: 6, text: 'What is bar?' }
    ]
  }

  render() {
    const { cards, exitDir } = this.state;
    return (
      <div className="App">
        <div className="CardsContainer">
            { cards.map( card => {
              return (
                <CSSTransition key={card.key} classNames={`Exit--${exitDir}`} timeout={300} >
                  <Card {...card} popCard={this.popCard} />
                </CSSTransition>
              )
            } ) }
        </div>
        <div className="ButtonsContainer">
          <button className="Button Button--green" onClick={this.handleClickYes}>
            Yes
          </button>
          <button className="Button Button--red" onClick={this.handleClickNo}>
            No
          </button>
        </div>
      </div>
    );
  }

  handleClickYes = () => {
    this.setState(produce(state => {
      state.cards[state.cards.length - 1].exit = true;
      state.exitDir = 'left';
    }));
  }

  handleClickNo = () => {
    this.setState(produce(state => {
      state.cards[state.cards.length - 1].exit = true;
      state.exitDir = 'right';
    }));
  }

  popCard = () => {
    this.setState(produce(state => {
      state.cards.pop();
    }));
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);