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