web/DialogHolder: improve first animation performance, prevent lag

sometimes the initial dialog animation lags, and as i've discovered it's mostly caused by animating box-shadow (even though it's not directly animated). replacing it with filter seems to have improved the performance a LOT lol.

also:
- made the in animation jumpier
- delayed the animation of modal a bit to let the background start appearing first
- extended opacity fade in by 5%
This commit is contained in:
wukko 2025-04-24 17:18:22 +06:00
parent f21f16a700
commit 926008818e
No known key found for this signature in database
GPG Key ID: 3E30B3F26C7B4AA2

View File

@ -85,6 +85,8 @@
-webkit-backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
opacity: 0; opacity: 0;
will-change: opacity;
transition: opacity 0.2s; transition: opacity 0.2s;
} }
@ -105,19 +107,21 @@
align-items: center; align-items: center;
background: var(--popup-bg); background: var(--popup-bg);
box-shadow: box-shadow: 0 0 0 2px var(--popup-stroke) inset;
0 0 0 2px var(--popup-stroke) inset,
0 0 60px 10px var(--popup-bg);
border-radius: 29px; border-radius: 29px;
filter: drop-shadow(0 0 40px var(--button));
padding: var(--dialog-padding); padding: var(--dialog-padding);
position: relative; position: relative;
will-change: transform; will-change: transform, opacity, filter;
} }
:global(dialog.open .dialog-body) { :global(dialog.open .dialog-body) {
animation: modal-in 0.35s; animation: modal-in 0.35s;
animation-delay: 0.06s;
animation-fill-mode: backwards;
} }
:global(dialog.closing .dialog-body) { :global(dialog.closing .dialog-body) {
@ -151,11 +155,11 @@
transform: scale(0.8); transform: scale(0.8);
opacity: 0; opacity: 0;
} }
30% { 35% {
opacity: 1; opacity: 1;
} }
50% { 50% {
transform: scale(1.005); transform: scale(1.01);
} }
100% { 100% {
transform: scale(1); transform: scale(1);
@ -181,7 +185,7 @@
1% { 1% {
transform: translateY(200px); transform: translateY(200px);
} }
30% { 35% {
opacity: 1; opacity: 1;
} }
50% { 50% {