added view transition

css/main.css

@@ -1134,3 +1134,63 @@ h3 {
 .hidden {
   display: none !important;
 }
+
+::view-transition-old(root) {
+  -webkit-animation: slide-up-out 0.3s both;
+          animation: slide-up-out 0.3s both;
+}
+
+::view-transition-new(root) {
+  -webkit-animation: slide-up-in-place 0.3s both;
+          animation: slide-up-in-place 0.3s both;
+}
+
+@-webkit-keyframes slide-up-in-place {
+  from {
+    opacity: 0;
+    transform: translateY(1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-up-in-place {
+  from {
+    opacity: 0;
+    transform: translateY(1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@-webkit-keyframes slide-up-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-1rem);
+  }
+}
+@keyframes slide-up-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-1rem);
+  }
+}
+@media (prefers-reduced-motion) {
+  ::view-transition-group(*),
+::view-transition-old(*),
+::view-transition-new(*) {
+    -webkit-animation: none !important;
+            animation: none !important;
+  }
+}

css/main.scss

@@ -1098,3 +1098,37 @@ h3 {
 .hidden {
   display: none !important;
 }
+
+::view-transition-old(root) {
+  animation: slide-up-out 0.3s both;
+}
+::view-transition-new(root) {
+  animation: slide-up-in-place 0.3s both;
+}
+@keyframes slide-up-in-place {
+  from {
+    opacity: 0;
+    transform: translateY(1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes slide-up-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-1rem);
+  }
+}
+@media (prefers-reduced-motion) {
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none !important;
+  }
+}

index.html

@@ -268,8 +268,18 @@
                         this.routingStart(this.state)
                     }
                     if (this.routes[page]) {
-                        await this.routes[page](this.state)
+                        // Fallback for browsers that don't support View transition API:
-                        this.lastPage = page
+                        if (!document.startViewTransition) {
+                            await this.routes[page](this.state)
+                            this.lastPage = page
+                            return;
+                        }
+
+                        // With a transition:
+                        document.startViewTransition(async () => {
+                            await this.routes[page](this.state)
+                            this.lastPage = page
+                        });
                     } else {
                         if (this.routes['404']) {
                             this.routes['404'](this.state);
@@ -1312,11 +1322,7 @@
         // routing logic
         const router = new Router({
             routingStart(state) {
-                const { page } = state
+                const { page } = state;
-                if ("scrollRestoration" in history) {
-                    history.scrollRestoration = "manual";
-                }
-                window.scrollTo(0, 0);
                 if (floGlobals.myFloID && !getRef('main_header')) {
                     renderElem(getRef('app_body'), html`
                         <header id="main_header">