Hi I have created a collapsable sidebar the expanding animation works fine I mean as you can see when you expand the sidebar it goes smoothly but the problem comes when I am collapsing the sidebar like first the dark blue chevron comes and sticks to the left side and then the sidebar collapses with a jerk. So can anyone tell me why its happening? and how can I correct it make the sidebar and the icon go at the same time.

Help is highly appreciated!

let expandIcon = document.querySelector('.epnd-clpse-icon')

expandIcon.addEventListener('click', function() {
  $('.sidebar-container').toggleClass('sidebar-container-clpse')
  $('.epnd-clpse-icon').toggleClass('epnd-clpse-icon-trn')

  console.log("I am clicked")
})

.sidebar-container {
  background: #ccc;
}

.epnd-clpse-icon {
  background: white;
  color: white;
}

a {
  text-decoration: none;
}

.sidebar-icon i {
  color: #06d6a0;
  width: 30px;
}

ul {
  padding-left: 0;
}

.sidebar-container {
  width: 100%;
  max-width: 15%;
  min-width: 250px;
  transition: all 0.5s linear;
  position: relative;
  border-left: 20px solid var(--primary-light);
  overflow-x: hidden;
}

.sidebar-container-clpse {
  min-width: 80px !important;
  width: 80px !important;
  overflow-x: hidden;
  transition: all 0.5s linear;
}

.epnd-clpse-icon {
  position: absolute;
  /* bottom: 100px;
    left: 10px; */
  top: 50%;
  right: -10px;
  transition: all 0.5s linear;
  cursor: pointer;
  background-color: #001846;
  padding: 0.8rem;
  border-radius: 10px;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.epnd-clpse-icon-trn {
  /* transform: rotateY(180deg); */
  transition: all 0.5s linear;
  left: 0px;
}

.sidebar .nav-link {
  display: flex !important;
  padding: 0.6rem 1rem;
  align-items: center;
}

.sidebar ul li {
  position: relative;
  width: 100%;
  list-style: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE 4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div >
  <div >
    <ul >
      <div >
        <i ></i>
      </div>
      <li >
        <a  href="user-dashboard.php">
          <span >
<i ></i>
                    </span>
          <span >Dashboard</span>
        </a>
      </li>
      <li >
        <a  href="quiz.php">
          <span >
                      <i ></i>
                    </span>
          <span >Quiz</span>
        </a>
      </li>
      <li >
        <a  href="#">
          <span >
                <i ></i>
                    </span>
          <span >Blog</span>
        </a>
      </li>
    </ul>
    <div >
      <i ></i>
    </div>
  </div>
</div>

CodePudding user response：

In your JavaScript you add the class epnd-clpse-icon-trn. Which adds a left:0px;

   .epnd-clpse-icon-trn{
       /* transform: rotateY(180deg); */
       transition: all 0.5s linear;
       left: 0px;
    }

Because the original element does not have a left: property, CSS cannot compute a transition of the value and thus will 'pop' the element to the left.

CodePudding user response：

Change this...

.epnd-clpse-icon-trn{
   transition: all 0.5s linear;
   left: 0px;
}

...to this.

.epnd-clpse-icon-trn{
   transition: all 0.5s linear;
   transform: translateX(-60%);
}

See the snippet below.

let expandIcon = document.querySelector('.epnd-clpse-icon')

expandIcon.addEventListener('click', function() {
  $('.sidebar-container').toggleClass('sidebar-container-clpse')
  $('.epnd-clpse-icon').toggleClass('epnd-clpse-icon-trn')

  console.log("I am clicked")
})

.sidebar-container {
  background: #ccc;
}

.epnd-clpse-icon {
  background: white;
  color: white;
}

a {
  text-decoration: none;
}

.sidebar-icon i {
  color: #06d6a0;
  width: 30px;
}

ul {
  padding-left: 0;
}

.sidebar-container {
  width: 100%;
  max-width: 15%;
  min-width: 250px;
  transition: all 0.5s linear;
  position: relative;
  border-left: 20px solid var(--primary-light);
  overflow-x: hidden;
}

.sidebar-container-clpse {
  min-width: 80px !important;
  width: 80px !important;
  overflow-x: hidden;
  transition: all 0.5s linear;
}

.epnd-clpse-icon {
  position: absolute;
  /* bottom: 100px;
    left: 10px; */
  top: 50%;
  right: -10px;
  transition: all 0.5s linear;
  cursor: pointer;
  background-color: #001846;
  padding: 0.8rem;
  border-radius: 10px;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.epnd-clpse-icon-trn {
  /* transform: rotateY(180deg); */
  transition: all 0.5s linear;
  transform: translateX(-60%);
}

.sidebar .nav-link {
  display: flex !important;
  padding: 0.6rem 1rem;
  align-items: center;
}

.sidebar ul li {
  position: relative;
  width: 100%;
  list-style: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE 4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div >
  <div >
    <ul >
      <div >
        <i ></i>
      </div>
      <li >
        <a  href="user-dashboard.php">
          <span >
            <i ></i>
          </span>
          <span >Dashboard</span>
        </a>
      </li>

      <li >
        <a  href="quiz.php">
          <span >
            <i ></i>
          </span>
          <span >Quiz</span>
        </a>
      </li>

      <li >
        <a  href="#">
          <span >
            <i ></i>
          </span>
          <span >Blog</span>
        </a>
      </li>
    </ul>

    <div >
      <i ></i>
    </div>
  </div>
</div>