CODEWITHSUNDEEP
javascripthtmljquerycss
Shayan Kanwal
Shayan Kanwal

Reputation: 556

how to the make animation happen at the same time?

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 class="sidebar-container bg-primary-ex-lgt">
  <div class="sidebar min-100-vh py-5 d-flex flex-column justify-content-between">
    <ul class="dash-links-icon">
      <div class="dash-res-close-icon px-2 mb-5">
        <i class="fa-solid fa-chevron-right"></i>
      </div>
      <li class="links-icon  my-2  <?php if($page=='home'){echo 'sdbr-active';}?>">
        <a class="nav-link" href="user-dashboard.php">
          <span class="sidebar-icon">
<i class="fa-solid fa-house"></i>
                    </span>
          <span class="sidebar-text">Dashboard</span>
        </a>
      </li>
      <li class="links-icon my-2 <?php if($page=='quiz'){echo 'sdbr-active';}?>">
        <a class="nav-link" href="quiz.php">
          <span class="sidebar-icon">
                      <i class="fa-solid fa-lightbulb"></i>
                    </span>
          <span class="sidebar-text">Quiz</span>
        </a>
      </li>
      <li class="links-icon my-2">
        <a class="nav-link" href="#">
          <span class="sidebar-icon">
                <i class="fa-solid fa-book"></i>
                    </span>
          <span class="sidebar-text">Blog</span>
        </a>
      </li>
    </ul>
    <div class="epnd-clpse-icon">
      <i class="fa-solid fa-chevron-right"></i>
    </div>
  </div>
</div>

Upvotes: 1

Views: 52

Answers (1)

Kay Angevare
Kay Angevare

Reputation: 667

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.

How to fix:

To fix this, you'll have to either position the original element by using left: so CSS can calculate it's position transition.

Alternatively, position the element position:absolute within it's parent element. This way, if you move the parent, the element will shift accordingly. In your code, you've already done this, so changing the CSS related to .epnd-clpse-icon-trn would be sufficient:

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

Ironically, by removing the styling related to .epnd-clpse-icon-trn, you'll do exactly what you're trying to manifest.

Upvotes: 1

Related Questions