Simplify view transition
This commit is contained in:
parent
7e298a0d2e
commit
4e97cd8002
2 changed files with 1 additions and 36 deletions
|
@ -8,38 +8,3 @@
|
||||||
@view-transition {
|
@view-transition {
|
||||||
navigation: auto;
|
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
(hsx
|
(hsx
|
||||||
(div :class "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 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"
|
(main :class "flex-1 px-2 py-6 md:px-4 md:py-8"
|
||||||
children)
|
children)
|
||||||
(footer :class "flex p-2 justify-center text-sm border-t-1"
|
(footer :class "flex p-2 justify-center text-sm border-t-1"
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue