Animate transition between pages

sampler/src/main/java/atlantafx/sampler/layout/ApplicationWindow.java

@@ -3,10 +3,14 @@ package atlantafx.sampler.layout;
 
 import atlantafx.sampler.page.Page;
 import atlantafx.sampler.page.components.OverviewPage;
+import javafx.animation.FadeTransition;
 import javafx.application.Platform;
 import javafx.scene.layout.BorderPane;
 import javafx.scene.layout.HBox;
 import javafx.scene.layout.StackPane;
+import javafx.util.Duration;
+
+import java.util.Objects;
 
 import static javafx.scene.layout.Priority.ALWAYS;
 
@@ -21,13 +25,27 @@ public class ApplicationWindow extends BorderPane {
 
         sidebar.setOnSelect(pageClass -> {
             try {
-                // reset previous page, e.g. to free resources
-                if (!pageContainer.getChildren().isEmpty() && pageContainer.getChildren().get(0) instanceof Page page) {
-                    page.reset();
+                final Page prevPage = (!pageContainer.getChildren().isEmpty() && pageContainer.getChildren().get(0) instanceof Page page) ? page : null;
+                final Page nextPage = pageClass.getDeclaredConstructor().newInstance();
+
+                // startup, no animation
+                if (getScene() == null) {
+                    pageContainer.getChildren().add(nextPage.getView());
+                    return;
                 }
 
-                Page page = pageClass.getDeclaredConstructor().newInstance();
-                pageContainer.getChildren().setAll(page.getView());
+                Objects.requireNonNull(prevPage);
+
+                // reset previous page, e.g. to free resources
+                prevPage.reset();
+
+                // animate switching between pages
+                pageContainer.getChildren().add(nextPage.getView());
+                FadeTransition transition = new FadeTransition(Duration.millis(300), nextPage.getView());
+                transition.setFromValue(0.0);
+                transition.setToValue(1.0);
+                transition.setOnFinished(t -> pageContainer.getChildren().remove(prevPage.getView()));
+                transition.play();
             } catch (Exception e) {
                 throw new RuntimeException(e);
             }

sampler/src/main/resources/assets/styles/index.css

@@ -64,6 +64,7 @@
 .page > .header {
     -fx-padding: 10px 20px 14px 20px;
     -fx-spacing: 10px;
+    -fx-background-color: -color-bg-default;
 }
 .page > .stack > .scroll-pane {
     -fx-background-color: -color-bg-default;