feat: Enhance ItemSettingsModal with smoother opening and closing transitions

This commit is contained in:
alexsparkes
2026-02-07 20:33:48 +00:00
parent 9e75be2b89
commit 864579de84
2 changed files with 25 additions and 1 deletions

View File

@@ -184,7 +184,7 @@ const ItemSettingsModal = ({ pack, isOpen, onClose, isEnabled }) => {
return (
<Modal
closeTimeoutMS={100}
closeTimeoutMS={300}
onRequestClose={onClose}
isOpen={isOpen}
className="Modal itemSettingsModal"

View File

@@ -8,10 +8,34 @@
background: var(--modal-background, #1a1a1a);
border-radius: 12px;
padding: 0;
opacity: 0;
transform: scale(0.95);
transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
&.ReactModal__Content--after-open {
opacity: 1;
transform: scale(1);
}
&.ReactModal__Content--before-close {
opacity: 0;
transform: scale(0.95);
}
}
.itemSettingsOverlay {
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
background-color: rgb(0 0 0 / 70%);
&.ReactModal__Overlay--after-open {
opacity: 1;
}
&.ReactModal__Overlay--before-close {
opacity: 0;
}
}
.itemSettings-header {