如何为Bootstrap侧边栏按钮的两个Font Awesome图标实现简洁过渡动画？

可以通过CSS定位让两个图标重叠，结合transition属性实现简洁的"推出"过渡效果，无需复杂代码，具体实现如下：

核心CSS代码 #

/* 图标容器：设置相对定位，让内部图标可重叠对齐 */
.icons {
  position: relative;
  width: 24px; /* 图标尺寸可按需调整 */
  height: 24px;
}

/* 统一两个图标的基础样式：绝对定位覆盖容器，居中对齐，添加过渡动画 */
.sidebar-toggle-icon-default,
.sidebar-toggle-icon-active {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease; /* 过渡时长可自定义 */
}

/* 默认状态：隐藏激活图标（透明+右移），显示默认图标 */
.sidebar-toggle-icon-active {
  opacity: 0;
  transform: translateX(10px); /* 右移距离模拟"推出"前置位 */
}

/* 按钮悬停时：切换图标状态，实现过渡动画 */
#sidebar-toggle-button:hover .sidebar-toggle-icon-default {
  opacity: 0;
  transform: translateX(-10px); /* 左移退出视野 */
}

#sidebar-toggle-button:hover .sidebar-toggle-icon-active {
  opacity: 1;
  transform: translateX(0); /* 复位显示 */
}

效果说明 #

1. 先通过相对/绝对定位让两个图标完全重叠在按钮内的同一位置
2. 默认状态下激活图标透明且右移，仅显示默认的三条杠图标
3. 鼠标悬停按钮时，默认图标透明左移退出，激活图标平滑复位显示，形成类似"中间栏被推出"的动画感

额外优化（可选） #

如果需要结合侧边栏的展开状态固定图标样式，可以利用Bootstrap Offcanvas自带的show类，添加以下CSS：

/* 侧边栏展开时，固定显示激活图标 */
.offcanvas.show ~ #sidebar-toggle-button .sidebar-toggle-icon-default {
  opacity: 0;
  transform: translateX(-10px);
}

.offcanvas.show ~ #sidebar-toggle-button .sidebar-toggle-icon-active {
  opacity: 1;
  transform: translateX(0);
}

内容的提问来源于stack exchange，提问作者Firebug2309