CSS slide-in with translateX property not staying in place
Hello, everyone 👋.
My problem with this is that the form is supposed to slide in from the left and stay in place so the user can add a new note.
I am using the transform translateX property initially set to 100% to move the form to the right. Then when a button is clicked, the translateX property will be set to 0 which moves the form into view from the right to the left with a smooth animation.
What I have tried but failed 😔 :
- setting the forms display to none initially and when the button is clicked, the display will be set to flex then a timeout of 600ms will change the translateX property from 100% to 0
The source code link is here : https://github.com/michTheBrandofficial/notes-app/blob/main/components/Form.tsx
GitHub
notes-app/components/Form.tsx at main · michTheBrandofficial/notes-...
A note taking app built with NixixJS. Contribute to michTheBrandofficial/notes-app development by creating an account on GitHub.
1 Reply
At the 17th second of the video, that's when the form stays in place.