michTheBrandofficial
KPCKevin Powell - Community
•Created by michTheBrandofficial on 9/21/2023 in #front-end
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
2 replies