如何用SCSS实现点击Show按钮时div.content的左右移动动画

1. 补全HTML结构 #

原HTML缺少触发交互的「Show」按钮和复选框，需要补充这部分，确保复选框与.content有可被CSS选择器关联的层级关系：

<!-- 新增触发区域 -->
<ul>
  <li>
    <label for="toggle-content" class="show-btn">
      Show
      <span class="arrow"></span>
    </label>
    <input type="checkbox" id="toggle-content" hidden>
    <!-- 将.content放在复选框的兄弟层级，确保选择器可关联 -->
    <div class="content">
      <div class="container-fluid">
        <div class="row">
          <div>
            <div class="menu-card">
              <h3 class="menu-card__heading">Page Content</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>

2. SCSS实现交互逻辑 #

利用复选框的:checked状态控制箭头方向和.content的移动，修复选择器层级问题：

// 内容区域基础样式
.content {
  min-height: 455px;
  transition: transform 0.5s ease; // 用transition实现平滑移动，比animation更简洁
  transform: translateX(0); // 默认左移到位的状态
}

// 箭头基础样式
ul li .arrow {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  transition: transform 0.3s ease;
}

ul li .arrow:before,
ul li .arrow:after {
  content: '';
  position: absolute;
  background-color: #f6483b;
  width: 3px;
  height: 9px;
  top: 50%;
  left: 50%;
}

// 默认箭头向下
ul li .arrow:before {
  transform: translate(-50%, -50%) rotate(45deg);
}
ul li .arrow:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

// 复选框选中时：箭头向上，内容右移
ul li input[type='checkbox']:checked ~ .show-btn .arrow {
  transform: rotate(180deg);
}

ul li input[type='checkbox']:checked ~ .content {
  transform: translateX(160px); // 按需调整移动距离
}

// 隐藏原生复选框，仅用label触发
ul li input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

// 优化按钮点击体验
.show-btn {
  cursor: pointer;
  user-select: none;
}

原代码失效原因 #

• 选择器层级错误：原代码中复选框与.content无直接兄弟/后代关联，选择器无法命中目标元素
• 冗余的:focus伪类：点击交互无需依赖焦点状态，直接用复选框:checked即可稳定控制
• 缺少箭头方向切换的样式逻辑，未实现箭头上下变化的视觉反馈

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