react-transition-group生命週期方法componentWillLeave不被調用

Question

我試圖讓componentWillLeave被調用，我沒有運氣。 componentWillAppear被調用，但我無法讓前者調用。我見過的大多數回覆都要求確保回調函數被調用，我正在這樣做。如果這有所作爲，我也使用React路由器。任何幫助將不勝感激。

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

我還沒有嘗試過這與反應路由器，但與類似的路由器的方法。我把它用TransitionGroup版本1.x工作和努力讓我好動的孩子組分

1. 一個反應元素
2. 有它自己唯一的密鑰

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

注意：

當使用CSSTransitionGroup時，無法通知您的組件在傳輸時已經結束或者圍繞動畫執行更復雜的邏輯。如果您需要更細緻的控制，則可以使用較低級別的TransitionGroup API，它提供了執行自定義轉換所需的掛鉤。