Animation vor dem Unmount abspielen

Question

Ich habe eine React-App und verwende die Komponente <Transition> aus dem Paket react-transition-group, um Übergangsanimationen zu erstellen, wenn die Komponente erstellt und zerstört wird. Ich setzte die in Prop im componentWillMount Zyklus. Jedoch kann ich nicht herausfinden, wie man die in prop wieder zurück, wenn die Komponente zerstört wird. Die docs nicht wirklich viel sagen über die Ausfahrt Übergang

Hier ist mein Code:

const defaultStyle = { 
    transition: `opacity 1000ms ease-in-out`, 
    opacity: 0, 
    padding: 20, 
    display: 'inline-block', 
    backgroundColor: '#8787d8' 
}; 

const transitionStyles = { 
    entering: { opacity: 0 }, 
    entered: { opacity: 1 }, 
    exiting: { opacity: 1 }, 
    exited: { opacity: 0 }, 
}; 

export default class Home extends Component { 

    constructor() { 
     super(); 
     this.state = { 
      in: false 
     } 
    } 

    componentWillMount() { 
     const home = this; 

     // This: Works Perfectly 
     home.setState({ in: true }); 
    } 

    componentWillUnmount() { 
     const home = this; 

     // This: Not so much 
     home.setState({ in: false }); 
    } 

    render() { 
     return (
      <Transition in={ this.state.in } timeout={ 0 }> 
       {(state) => (
        <div className="page" style={{ 
         ...defaultStyle, 
         ...transitionStyles[state] 
        }}> 
         I'm A fade Transition! 
        </div> 
       )} 
      </Transition> 
     ) 
    } 
} 

Answer 1

Können Sie bestätigen, dass Ihre Komponente jemals tatsächlich Aushängen und dass componentWillUmount() aufgerufen zu werden? Die v2-Dokumentation scheint darauf hinzuweisen, dass Komponenten auch nach Erreichen des Übergangszustands exited im DOM bleiben. Sie setzen eine unmountOnExitprop frei, die die Komponente zwangsweise unmounten sollte, nachdem sie den angeregten Zustand erreicht hat. Pro Dokument:

Standardmäßig bleibt die untergeordnete Komponente aktiviert, nachdem sie den Status 'exited' erreicht hat. Legen Sie unmountOnExit fest, wenn Sie die Komponente nach dem Beenden lieber aushängen möchten.