react-transition-group lifecycle method componentWillLeave not being called

Question

I'm trying to get componentWillLeave to get called and I'm having no luck. componentWillAppear gets called, but I'm unable to get the former to call. Most responses I've seen call for making sure the callbacks are being called, which I am doing. I'm also using React router if that makes a difference. Any help would be greatly appreciated.

import React, { Component } from 'react';
import { TweenMax } from 'gsap';
import PropTypes from 'prop-types';

import { Animated } from '../../components/common/Animated';
import NavButton from '../../components/navButton/NavButton';

import './Team.scss';

class Team extends Component {

  componentDidMount() {
    this.el = this.refs.container;
  }

  componentWillAppear(callback) {
    TweenMax.set(this.el, { x: '100%' });
    TweenMax.to(this.el, 1, { x: '0%' });
    callback();
  }

  componentWillLeave(callback) {
    TweenMax.to(this.el, 1, { x: '-100%', onComplete: callback });
  }

  render() {
    const { match } = this.props;
    return (
      <div ref="container" className="teamContainer">
        <NavButton
          title={'To Interactive'}
          route={`/${match.params.monster}/interactive`}
        />
      </div>
    );
  }
}

Team.propTypes = {
  match: PropTypes.shape({
    pathname: PropTypes.shape({
      monster: PropTypes.number.isRequired,
    }),
  }),
};

Team.defaultProps = {
  match: {
    pathname: {
      monster: -1,
    },
  },
};

export default Animated(Team);

Answer 1

I haven't tried this with react router, but with a similar router approach. I got it to work using TransitionGroup v1.x and made sure my active child component was

1. a react element
2. had it's own unique key

https://github.com/reactjs/react-transition-group/tree/v1-stable

Note:

When using CSSTransitionGroup, there's no way for your components to be notified when a transition has ended or to perform any more complex logic around animation. If you want more fine-grained control, you can use the lower-level TransitionGroup API which provides the hooks you need to do custom transitions.