Schwierigkeiten mit Fade-Out/in JavaScript-Animation für Website-Inhalte ⇐ CSS

[Anonymous]

Auf meiner Website habe ich einen Container, der mehrere "Seiten" von Informationen enthält. Wenn eine Schaltfläche klickt, verschwindet die aktuelle Inhaltsseite und die nächste wird auf dem Bildschirm angezeigt, sodass die Zuschauer verschiedene Inhaltsfenster auf derselben Webseite durchführen können. Die Schaltflächen funktionieren perfekt, aber ich habe keinen Erfolg damit, es zu animieren. Ich möchte, dass der Text der aktuellen Seite nach links bewegt und verblasst, während die nächste Seite von rechts verblasst. Hier ist was ich bisher habe. < /P>
function fadeOutShowNext(currentId, nextId){
const currentSection = document.getElementById(currentId);
const nextSection = document.getElementById(nextId);

currentSection.classList.add('fade-out');

setTimeout(() => {
currentSection.style.display = 'none';
nextSection.style.display = 'block';

nextSection.classList.remove('fade-out');
}, 1000);

}
< /code>
CurrentID und NextID werden aus den Schaltflächenklicks übergeben. Keine Probleme dort..fade-out {
opacity: 0;
transition: opacity 1s ease-in-out;
}
< /code>
Ab sofort verblasst der Text so aus. Wenn ich jedoch versuche, eine ähnliche Verblassungsklasse hinzuzufügen, wird der Ausgangseffekt nicht mehr funktioniert. Ich habe versucht, Chatgpt für zu verwenden, aber es ist überhaupt keine Hilfe. Ich bin mir nicht sicher, was ich falsch mache. Alles im aktuellen Code ist für mich Sinn, aber wenn ich versuche, die Logik zu replizieren, um die zusätzlichen Effekte hinzuzufügen, funktioniert die Ausblendungsanimation nur nicht mehr funktioniert. Ich würde mich über jede Hilfe freuen.