過渡小組不點火生命週期方法

我正在對少數一些GSAP動畫組件作出反應，當他們進入和離開DOM。我目前遇到的問題是，只有第一個組件似乎是射擊輸入動畫。第一個組件不會觸發離開動畫，其餘組件不會觸發任何動畫。過渡小組不點火生命週期方法

相關的代碼下面

class Home extends React.Component { 
    render() { 
    const { lastActive, activeSection } = this.state; 

    let fullSection = null; 
    switch(activeSection) { 
     case 1: 
     fullSection = <SlideOne enterFromTwo={lastActive === 2 && activeSection === 1} /> 
     break; 

     case 2: 
     fullSection = <SlideFour /> 
     break; 

     default: 
     return false; 
    } 

    return (
     <TransitionGroup> 
     {fullSection} 
     </TransitionGroup> 
    ) 
    } 
}

現在的幻燈片一個

class SlideOne extends Component { 

    componentWillEnter() { 
    console.log('component will enter'); 
    } 

    componentWillAppear(callback) { 
    console.log('component will appear'); 

    if (!this.props.enterFromTwo) { 
     this.addAnimation(this.enterAnimation, {callback: callback}); 
    } else { 
     callback(); 
    } 
    } 

    componentWillLeave(callback) { 
    console.log('component will leave'); 
    callback(); 
    } 

    enterAnimation({target, options}) { 
    const title = target.find({name: 'title'}); 
    const tl = new TimelineMax({onComplete: options.callback}); 

    return tl.from(title, 3, { 
     autoAlpha: 0, 
     ease: Power2.easeIn 
    }); 
    } 


    render() { 
    return (
     <FullSection> 
     <BorderedTitle name="title">connecting the music industry</BorderedTitle> 
     </FullSection> 
    ); 
    } 
}

當幻燈片一個從DOM組件將離開生命週期方法不會被調用刪除。

沒有人有任何瞭解爲什麼這可能是這種情況。

來源

2017-05-04 Cody James Tooker

你沒有運行componentWillEnter回調，這可能是它。值得一試。可能值得一個jsfiddle或codepen項目，以便人們可以看到發生了什麼。 –