dvirlabs/navix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix animation

Browse Source
This commit is contained in:
dvirlabs 2025-06-03 07:52:13 +03:00
parent eb9ac54e0c
commit a3d905e95e
2 changed files with 8 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/components/AddAppModal.jsx
View File

@ -5,7 +5,6 @@ import { IoIosAddCircleOutline } from "react-icons/io";
function AddAppModal({ onAdded }) { function AddAppModal({ onAdded }) {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [spin, setSpin] = useState(false);
const [section, setSection] = useState(''); const [section, setSection] = useState('');
const [name, setName] = useState(''); const [name, setName] = useState('');
@ -13,13 +12,6 @@ function AddAppModal({ onAdded }) {
const [description, setDescription] = useState(''); const [description, setDescription] = useState('');
const [url, setUrl] = useState(''); const [url, setUrl] = useState('');
const handleOpen = () => {
setSpin(true);
setTimeout(() => {
setSpin(false);
setOpen(true);
}, 500); // match spin animation duration
};
const handleSubmit = async (e) => { const handleSubmit = async (e) => {
e.preventDefault(); e.preventDefault();
@ -40,8 +32,8 @@ function AddAppModal({ onAdded }) {
return ( return (
<> <>
<IoIosAddCircleOutline <IoIosAddCircleOutline
className={`add-button ${spin ? 'spin' : ''}`} className="add-button"
onClick={handleOpen} onClick={() => setOpen(true)}
/> />
{open && ( {open && (

11
frontend/src/style/AddAppModal.css
View File

@ -74,11 +74,12 @@
background-color: #0056b3; background-color: #0056b3;
} }
@keyframes spin { .add-button {
0% { transform: rotate(0deg); } transition: transform 0.2s ease, background-color 0.3s ease;
100% { transform: rotate(360deg); }
} }
.add-button.spin { .add-button:hover {
animation: spin 0.5s linear; background-color: #0056b3;
transform: rotate(90deg);
} }