I have a to-do list project where i have a side bar that will slide in from the right. However, the side bar (cutomization-bar in the code) doesn’t slide in the whole way so that there is some buttons that you can’t access.
I have tried some things that i could show in a code block:
/* Add animation for the customization tab */
@keyframes slideIn {
from {
transform: translateX(100%);
}
to {
transform: translateX(0%);
}
}
0%; /* Start off-screen */
.customization-tab {
display: none; /* Initially hide the customization tab */
width: 200px; /* Set the width of the customization tab */
background-color: #f2f2f2; /* Background color for the customization tab */
padding: 20px; /* Add some padding */
border-radius: 5px; /* Add border radius for rounded corners */
position: fixed; /* Fix the position */
top: 0; /* Position from the top */
right: -10}
.customization-tab.open {
animation: slideIn 2s forwards; /* Apply the animation */
right: 0; /* Slide in from the right */
margin-right: 15px
}
I where expecting it to slide in the whole way an not only part of the way that it does now
2
Answers
If add the
.open
class, you also need to display the div with the styledisplay: block
.The only drawback of display property is that it cannot be animated to disappear.
Transitions on the CSS display property – Stack Overflow answer
If preserving the animation during disappearance is important, you can use alternative settings instead of display.
You don’t need keyframes, as the change in the right property can also be animated.
It’s possible to achieve the animation using only the animation property, in which case CSS changes are automatically animated.
So, the animation will also be affected by JavaScript manipulation.
If you want something to slide in and out from the side, using a transform will be the easiest way to control that since the value can be based on the element’s width easily.
This simple example shows/hides the menu on hover to demo using
translateX