bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust animations, use explicit transition properties

Browse Source
This commit is contained in:
Alexander Zaytsev
2026-01-26 22:23:33 +01:00
parent 09f9b7fb45
commit ea1b6830f4
1 changed files with 14 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/dialog.css
+14 -8
View File
@@ -7,35 +7,41 @@
:is(.dialog) {
border: 0;
opacity: 0;
transform: scale(0.9);
transform: scale(0.85);
transform-origin: center;
transition: var(--dialog-duration) ease-out allow-discrete;
transition-property: opacity, overlay, transform;
transition-behavior: allow-discrete;
transition-duration: calc(var(--dialog-duration) / 2); /* Faster closing */
transition-property: display, opacity, overlay, transform;
transition-timing-function: ease-out;
&::backdrop {
background-color: var(--color-black);
opacity: 0.4;
transition: var(--dialog-duration) ease-out allow-discrete;
transition-property: opacity, overlay;
opacity: 0;
transition-behavior: allow-discrete;
transition-duration: calc(var(--dialog-duration) / 2);
transition-property: display, opacity, overlay;
transition-timing-function: ease-out;
}
&[open] {
opacity: 1;
transform: scale(1);
transition-duration: var(--dialog-duration); /* Normal opening speed */
&::backdrop {
opacity: 0.5;
transition-duration: var(--dialog-duration);
}
}
@starting-style {
&[open] {
opacity: 0;
transform: scale(0.9);
transform: scale(0.85);
}
&[open]::backdrop {
opacity: 0.4;
opacity: 0;
}
}
}