优化CSS动画：解决侧边栏和图标同步收缩时的跳动问题

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 {
  /* ... 其他样式 ... */
  width: 100%;
  max-width: 15%;
  min-width: 250px;
  transition: all 0.5s linear; /* 侧边栏的过渡效果 */
  position: relative;
  /* ... 其他样式 ... */
}

.sidebar-container-clpse {
  min-width: 80px !important;
  width: 80px !important;
  overflow-x: hidden;
  transition: all 0.5s linear; /* 确保收缩时也有过渡 */
}

.epnd-clpse-icon {
  position: absolute;
  top: 50%;
  right: -10px; /* 图标的初始定位 */
  transition: all 0.5s linear; /* 图标自身的过渡效果 */
  /* ... 其他样式 ... */
}

.epnd-clpse-icon-trn {
  /* transform: rotateY(180deg); */
  transition: all 0.5s linear; /* 这里的过渡声明 */
  left: 0px; /* 导致问题的定位属性 */
}

/* 保持 .sidebar-container 和 .sidebar-container-clpse 不变 */
.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 保持不变，它已经有了right和transition */
.epnd-clpse-icon {
  position: absolute;
  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 中冲突的left属性和多余的transition */
.epnd-clpse-icon-trn {
  /* transform: rotateY(180deg); 如果需要旋转动画，可以在这里添加 */
  /* 移除：transition: all 0.5s linear; */
  /* 移除：left: 0px; */
}

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

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); /* 假设 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;
  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 属性，例如： */
  /* transform: rotateY(180deg); */
  /* 移除：transition: all 0.5s linear; - 已由 .epnd-clpse-icon 处理 */
  /* 移除：left: 0px; - 避免与 right 冲突，让其随父元素宽度变化 */
}

/* 其他侧边栏内部元素样式 */
.sidebar .nav-link {
  display: flex !important;
  padding: 0.6rem 1rem;
  align-items: center;
}
.sidebar ul li {
  position: relative;
  width: 100%;
  list-style: none;
}