如何使动画同时发生？

Answer 1

在您的 JavaScript 中添加类 epnd-clpse-icon-trn。这增加了一个left:0px;

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

因为原始元素没有left: 属性，CSS 无法计算值的转换，因此会将元素“弹出”到左侧。

怎么修：

要解决此问题，您必须使用 left: 定位原始元素，以便 CSS 可以计算它的位置转换。

或者，将元素 position:absolute 定位在其父元素中。这样，如果您移动父元素，元素将相应地移动。在您的代码中，您已经这样做了，因此更改与 .epnd-clpse-icon-trn 相关的 CSS 就足够了：

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

具有讽刺意味的是，通过删除与.epnd-clpse-icon-trn 相关的样式，您将完全按照您想要表现的方式进行操作。

Answer 2

改变这个...

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

……到这个。

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

请参阅下面的 sn-p。

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 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>