paku/website
1
0
Fork 0
Code Issues4 Pull requests Projects Releases Packages Wiki Activity Actions

Simplify view transition

Browse source
This commit is contained in:
Akira Tempaku 2025-05-26 23:36:14 +09:00
parent 7e298a0d2e
commit 4e97cd8002
Signed by: paku
GPG key ID: 5B4E8402BCC50607
2 changed files with 1 additions and 36 deletions
assets/style
global.css
src/components
layout.lisp

35
assets/style/global.css
View file

@ -8,38 +8,3 @@
@view-transition {
navigation: auto;
}
@keyframes zoom-fade-out {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(1.05);
}
}
@keyframes zoom-fade-in {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
::view-transition-old(zoom-fade) {
animation: 400ms ease both zoom-fade-out;
}
::view-transition-new(zoom-fade) {
animation: 500ms ease 100ms both zoom-fade-in;
}
.zoom-fade {
view-transition-name: zoom-fade;
}

2
src/components/layout.lisp
View file

@ -10,7 +10,7 @@
(hsx
(div :class "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 zoom-fade"
(div :class "flex flex-col flex-1 overflow-y-scroll"
(main :class "flex-1 px-2 py-6 md:px-4 md:py-8"
children)
(footer :class "flex p-2 justify-center text-sm border-t-1"