Apply default page transitions
This commit is contained in:
parent
776592863c
commit
a1517013f3
2 changed files with 1 additions and 21 deletions
|
@ -8,7 +8,7 @@
|
||||||
|
|
||||||
(defcomp ~layout (&key children)
|
(defcomp ~layout (&key children)
|
||||||
(hsx
|
(hsx
|
||||||
(div :class "fade flex flex-col h-[100svh] w-full max-w-[700px] px-2 mx-auto"
|
(div :class "flex flex-col h-[100svh] w-full max-w-[700px] px-2 mx-auto"
|
||||||
(~header)
|
(~header)
|
||||||
(div :class "flex flex-col flex-1 overflow-y-scroll"
|
(div :class "flex flex-col flex-1 overflow-y-scroll"
|
||||||
(main :class "flex-1 px-2 py-6 md:px-4 md:py-8"
|
(main :class "flex-1 px-2 py-6 md:px-4 md:py-8"
|
||||||
|
|
|
@ -23,23 +23,3 @@
|
||||||
font-family: "Zen Maru Gothic", sans-serif;
|
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;
|
|
||||||
}
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue