Part 2 - Bootstrapping the exiting transition

Post.js

onExit = () => {}

executeExitingTransition = (node, done) => {
  // we're going to do some work in there!
  done();
}

onAddEndListener = (node, done) => {
  if (!this.preview) return done();
  
  const { in: inProp } = this.props;

  if (inProp) { // we're just adding this inProp logic
    const { image } = this.props.route.data.post;

    const img = new Image();
    img.src = `/img/${image}`;

    if (!img.complete) {
      img.onload = () => this.executeEnteringTransition(node, done);
      return;
    }
    this.executeEnteringTransition(node, done);
  } else {
    this.executeExitingTransition(node, done);
    // we're now triggering the exiting transition
  }
};

render() {
  /* same code */
  return (
    <CSSTransition
      {...transitionProps}
      onEnter={this.onEnter}
      onExit={this.onExit} // add this prop
      addEndListener={this.onAddEndListener}
      classNames="post"
    >