css Question posted in
Some basic documentation can be found here.

CSS sliding animation not sliding in the whole way

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

Tags:

2

Answers


  1. 0

    If add the .open class, you also need to display the div with the style display: block.

    function showCustomization() {
  document.querySelector('.customization-tab').classList.add('open');
}

function hideCustomization() {
  document.querySelector('.customization-tab').classList.remove('open');
}
    .customization-tab {
  display: none;
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
  padding: 20px;
  border-radius: 5px;
  position: fixed;
  top: 0;
  right: -10%;
}

.customization-tab.open {
  display: block; /* added */
  animation: slideIn 2s forwards;
  right: 0;
  margin-right: 15px;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}
    <button onclick="showCustomization()">Show Customization</button>
<button onclick="hideCustomization()">Hide Customization</button>
<div class="customization-tab">Customization Content</div>

    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.

    function showCustomization() {
  document.querySelector('.customization-tab').classList.add('open');
}

function hideCustomization() {
  document.querySelector('.customization-tab').classList.remove('open');
}
    .customization-tab {
  /* display: none; removed */
  
  visibility: hidden; /* added */
  opacity: 0; /* added */
  transition: visibility 0.5s, opacity 0.5s linear, right 0.5s linear; /* added (animation) */
  
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
  padding: 20px;
  border-radius: 5px;
  position: fixed;
  top: 0;
  right: -10%;
}

.customization-tab.open {
  visibility: visible; /* added */
  opacity: 1; /* added */
  
  right: 0;
  margin-right: 15px;
}
    <button onclick="showCustomization()">Show Customization</button>
<button onclick="hideCustomization()">Hide Customization</button>
<div class="customization-tab">Customization Content</div>

    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.

    function showCustomization() {
  const customizationTab = document.querySelector('.customization-tab');
  customizationTab.style.visibility = 'visible';
  customizationTab.style.opacity = '1';
  customizationTab.style.right = '0';
}

function hideCustomization() {
  const customizationTab = document.querySelector('.customization-tab');
  customizationTab.style.visibility = 'hidden';
  customizationTab.style.opacity = '0';
  customizationTab.style.right = '-10%';
}
    .customization-tab {
  /* display: none; removed */
  
  visibility: hidden; /* added */
  opacity: 0; /* added */
  transition: visibility 0.5s, opacity 0.5s linear, right 0.5s linear; /* added (animation) */
  
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
  padding: 20px;
  border-radius: 5px;
  position: fixed;
  top: 0;
  right: -10%;
}
    <button onclick="showCustomization()">Show Customization</button>
<button onclick="hideCustomization()">Hide Customization</button>
<div class="customization-tab">Customization Content</div>
    Login or Signup to reply.
  2. 0

    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

    #container {
  width: 80%;
  padding-bottom: 100%;
  position: relative;
  background: aliceblue;
  overflow: hidden;
}

#menu {
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 100%;
  background: green;
  transform: translateX(100%);
  transition: transform 0.3s;
}

#container:hover > #menu {
  transform: translateX(0);
}
    <div id="container">
  <div id="menu"></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search