Make page transitions smooth

src/components/header.lisp

@@ -50,12 +50,9 @@
                   "fixed flex flex-col items-center justify-center "
                   "z-10 top-0 right-0 w-full h-full gap-16 bg-gray-200")
          :x-show "open"
-         :|x-transition:enter| "transition ease-out duration-400"
-         :|x-transition:enter-start| "translate-x-full"
-         :|x-transition:enter-end| "translate-x-0"
-         :|x-transition:leave| "transition ease-in duration-400"
-         :|x-transition:leave-start| "translate-x-0"
-         :|x-transition:leave-end| "translate-x-full"
+         :x-transition.opacity t
+         :|x-transition:enter.duration.300ms| t
+         :|x-transition:leave.duration.300ms| t
          (h2 :class "text-5xl font-bold"
            "Menu")
          (ul 

src/components/layout.lisp

@@ -8,7 +8,7 @@
 
 (defcomp ~layout (&key children)
   (hsx
-   (div :class "flex flex-col h-[100svh] w-full max-w-[700px] px-2 mx-auto"
+   (div :class "fade flex flex-col h-[100svh] w-full max-w-[700px] px-2 mx-auto"
      (~header)
      (div :class "flex flex-col flex-1 overflow-y-scroll"
        (main :class "flex-1 px-2 py-6 md:px-4 md:py-8"

src/renderer.lisp

@@ -4,8 +4,6 @@
         #:jingle)
   (:import-from #:hsx/element
                 #:element)
-  (:import-from #:website/lib/env
-                #:website-env)
   (:import-from #:website/components/metadata
                 #:~metadata)
   (:import-from #:website/components/scripts
@@ -17,9 +15,7 @@
 (defmethod jingle:process-response ((app jingle:app) result)
   (set-response-header :content-type "text/html; charset=utf-8")
   (when (eq (request-method *request*) :get)
-    (set-response-header :cache-control (if (string= (website-env) "dev")
-                                            "private, no-store"
-                                            "public, max-age=60")))
+    (set-response-header :cache-control "public, max-age=60"))
   (call-next-method app
                     (render-to-string
                      (hsx (html :lang "ja"
@@ -28,5 +24,6 @@
                               (~scripts))
                             (body
                               :hx-ext "head-support, response-targets, preload"
-                              :hx-boost "true" :hx-target-404 "body" :hx-target-5* "body"
+                              :hx-boost "true" :hx-swap "transition:true"
+                              :hx-target-404 "body" :hx-target-5* "body"
                               (~layout result)))))))

static/style/global.css

@@ -23,3 +23,23 @@
     font-family: "Zen Maru Gothic", sans-serif;
   }
 }
+
+@keyframes fade-in {
+  from { opacity: 0; }
+}
+
+@keyframes fade-out {
+  to { opacity: 0; }
+}
+
+::view-transition-old(fade) {
+  animation: 300ms ease both fade-out,
+}
+
+::view-transition-new(fade) {
+  animation: 300ms ease both fade-in,
+}
+
+.fade {
+  view-transition-name: fade;
+}