I made a drawer in React, that I got from the internet
The problem is that it always slides from right to left, and I don't know to to make it slide from left to right
The CSS code for the drawer is:
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
.side-drawer {
position: fixed;
height: 100%;
background: black;
color: white;
top: 0;
right: 0;
width: 40%;
z-index: 200;
box-shadow: 1px 0px 7px rgba(0, 0, 0, 0.5);
transform: translateX(100%);
transition: transform 0.3s ease-out;
}
.side-drawer.open {
transform: translateX(0);
}
I don't know why it slides the way it does, I guess it is related to transition/transform
How can I make it slide from left to right?
I made a sandbox for it
Thanks in advance
Rafael
CodePudding user response:
It's because the css anchors it to the right with right: 0
and then shifts the content to the right 100% of its width transform: translateX(100%)
. When you apply the open
class, it moves back to its original position transform: translateX(0)
. To come out of the left, you'd update those values to something like:
.side-drawer {
position: fixed;
height: 100%;
background: black;
color: white;
top: 0;
left: 0;
width: 40%;
z-index: 200;
box-shadow: 1px 0px 7px rgba(0, 0, 0, 0.5);
transform: translateX(-100%);
transition: transform 0.3s ease-out;
}
.side-drawer.open {
transform: translateX(0);
}
CodePudding user response:
I got it!
this is my new CSS:
.side-drawer {
position: fixed;
height: 100%;
background: black;
color: white;
top: 0;
right: 100%; /* changed it */
width: 40%;
z-index: 200;
box-shadow: 1px 0px 7px rgba(0, 0, 0, 0.5);
transform: translateX(0); /* changed it */
transition: transform 0.3s ease-out;
}
.side-drawer.open {
transform: translateX(100%); /* changed it */
}