CSS Transitions nicht überleben Component innere DOM-Struktur

Question

I have illustrated the problem in this CodePen

const Component = ({ structure }) => { 
    switch (structure) { 
    case 'nested': 
     return (
     <div> 
      <AnimatedComponent /> 
     </div> 
    ); 
    case 'flat': 
     return 
     <AnimatedComponent /> 
     ; 
    } 
}; 

Es gibt eine gewisse Logik in AnimatedComponent Reagieren zu ändern, die das Styling der Komponente in einer animierten Art und Weise ändert, zum Beispiel Ändern Sie die Hintergrundfarbe von Schwarz zu Rot für eine Dauer von 1 Sekunde. Die Animation wird gestartet, indem eine Farbklasse unter AnimatedComponent geändert wird. Es gibt CSS, um die Animation mit der geänderten Klasse zu behandeln.

Wenn Sie die DOM-Struktur von verschachtelt in flach ändern, wird das HTML-Element zerstört und neu erstellt, der Übergangszustand geht verloren (der Browser weiß nicht, welche Klasse vorher gesetzt wurde, weil das Element neu erstellt wurde).

Was ich will Reagieren zu tun ist, die DOM-Struktur mit beweglichen Elementen an neuen Positionen zu ändern, nicht zu zerstören und neu zu erstellen.

Ist das möglich?

Ich habe versucht, die key Requisiten auf <AnimatedComponent /> zu verwenden, aber es behebt nur den Flash von DOM ändern. Die Animation wird übersprungen. Siehe Codepen. Danke Thomas Rooney für diesen Vorschlag.

Kann ich React sagen, dass die Klassenänderungen nur einen Tick nach der Änderung der Position des DOM-Elements angewendet werden sollen?

Answer 1

Kann ich React sagen, dass die Klassenänderungen nur einen Tick nach der Änderung der Position des DOM-Elements angewendet werden sollen?

Ja, genau das ist die setTimeout Funktion für. Kopieren Sie Ihr zweites Beispiel, in dem Sie das Flackern behoben haben und Ihre Farbaktion mit setTimeout verpacken (ohne Zeitangabe, die standardmäßig 0 ist), um Ihr Problem zu beheben.

onColorClick:() => { 
    setTimeout(() => { 
    dispatch({type: 'TOGGLE_COLOR'}) 
    }) 
}, 

codepen

Update: Ich habe bemerkt, es ist ein bisschen zuverlässiger ist (fn, ms) in setTimeout, einige Zeit vor dem Farbwechsel (zweites Argument hinzufügen Ich glaube, das liegt daran, dass setState auch asynchron geschieht..