ReactJS ReactCSSTransitionGroup animiert nur beim ersten Laden

Question

Ich versuche animierte Übergänge bei der Routenänderung in meiner React/Redux-App einzurichten. Ich habe Beispiele für SO und die offiziellen Tutorials als Leitfaden verwendet, bin aber bisher nur in der Lage gewesen, den Fade-In-Effekt zu erhalten, um beim ersten Laden zu arbeiten. Wenn Sie Routen ändern, werden die Komponenten ohne Animation angezeigt.

Fehle ich etwas offensichtlich - und ist dies der beste Weg zu folgen, wenn Sie versuchen, den Inhalt in/out zu animieren?

/* 
** Loop through ACF components to layout page 
*/ 

blocks =() => { 
if (this.props.pages.pages[0]) { 
    return this.props.pages.pages[0].acf.components && 
    this.props.pages.pages[0].acf.components.map((block, index) => { 
     let Component = componentMapping[block.acf_fc_layout]; 
     return <Component key={index} data={block} id={index} />; 
    }); 
    } 
}; 

/* 
** Render page on state change 
*/ 

render() { 
return (
    <div className="App"> 
    <NavContainer /> 
    <ReactCSSTransitionGroup 
     transitionName="example" 
     transitionAppear={true} 
     transitionAppearTimeout={500} 
     transitionEnterTimeout={500} 
     transitionLeaveTimeout={300} 
    > 
     {this.blocks()} 
    </ReactCSSTransitionGroup> 
    </div> 
); 
} 

Die CSS-I enthalten sind, ist wie folgt:

.example-enter { 
opacity: 0.01; 
} 

.example-enter.example-enter-active { 
opacity: 1; 
transition: opacity 500ms ease-in; 
} 

.example-leave { 
opacity: 1; 
} 
.example-appear { 
opacity: 0.01; 
} 

.example-appear.example-appear-active { 
opacity: 1; 
transition: opacity .5s ease-in; 
} 
.example-leave.example-leave-active { 
opacity: 0.01; 
transition: opacity 300ms ease-in; 
} 

ich jede Hilfe dankbar, dass jemand geben könnte. Danke im Voraus!

Answer 1

Lassen Sie uns einige Fehlerbehebungsschritte durchgehen, um auf den Grund zu kommen, aber zuerst, lassen Sie mich Ihnen einige grundlegende Tipps geben, wie die ReactCSSTransitionGroup-Komponente funktioniert.

<ReactCSSTransitionGroup/> muss auf der Seite vorhanden sein, auf der die Kinder nach dem Mounten hinzugefügt und entfernt werden. z.B. Sie haben eine Liste der Mitarbeiter, die Sie filtern, basierend auf einem Eingabefeld. Während der Filter steuert, was hinzugefügt und entfernt wird, kommen und gehen diese Objekte und werden animiert. Die <ReactCSSTransitionGroup/> muss zuerst existieren und die Komponente muss montiert werden.

Mit React Router können Sie Komponenten beim Ändern von Routen ein- und aushängen. Wenn sich <ReactCSSTransitionGroup/> in jeder Komponente befindet, die gemountet und ausgehängt wird, wird der Übergang nicht ausgelöst. Ich denke, das ist es, was du erlebst. Ich würde vorschlagen, diese NPM package auszuprobieren, um Ihnen zu helfen, auf Animationen mit Streckenänderungen aufzupassen.

Das Problem, dass Ihre Animationen nur einmal ausgelöst werden, ist ein anderes Problem als oben. Ich mache mir Sorgen um diesen Teil:

return this.props.pages.pages[0].acf.components && 
    this.props.pages.pages[0].acf.components.map((block, index) => { 
     let Component = componentMapping[block.acf_fc_layout]; 
     return <Component key={index} data={block} id={index} />; 
    }); 

Rückkehr eine Variable mit dem & & Operator können Sie lustige Ergebnisse. Versuchen Sie einige explizite if Anweisungen. Oder ehrlich ändern Sie einfach den Code dazu:

if (this.props.pages.pages[0]) { 
    return this.props.pages.pages[0].acf.components.map((block, index) => { 
     let Component = componentMapping[block.acf_fc_layout]; 
     return <Component key={index} data={block} id={index} />; 
    }); 
} 

Ein anderer Gedanke hatte ich war zu sehen, was passiert, wenn man weglassen, dass die Erstellung von Bauteilen (componentMapping[block.afc_fc_layout]) und nur eine <div> zurück. Sehen Sie, was passiert und sehen Sie, ob Sie dadurch Probleme bekommen.