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
.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
A note taking app built with NixixJS. Contribute to michTheBrandofficial/notes-app development by creating an account on GitHub.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Recent Announcements
Similar Threads
Was this page helpful?
