如何动态调整选中input后方BACK div的transform:translate偏移值

DevOps 小满

2026-10-16

实现方案

我们可以通过监听单选框的选中事件，动态计算选中项的水平偏移量，赋值给BACK元素的伪元素transform属性即可，具体修改如下：

先放开CSS中#back::after的注释，保留原有样式
新增JS逻辑，监听所有单选框的变更事件，计算对应偏移值：

// 获取所有单选框和BACK元素
const radios = document.querySelectorAll('input[name="tap"]');
const backEl = document.querySelector('#back');
// 伪元素宽度，和CSS中设置的60px保持一致
const AFTER_WIDTH = 60;

radios.forEach(radio => {
  radio.addEventListener('change', () => {
    if (radio.checked) {
      // 获取对应的label元素
      const label = document.querySelector(`label[for="${radio.id}"]`);
      // 计算label中心的水平坐标
      const labelCenterX = label.offsetLeft + label.offsetWidth / 2;
      // 计算伪元素需要偏移的距离：以label中心为基准，减去伪元素自身宽度的一半实现居中
      const offsetX = labelCenterX - AFTER_WIDTH / 2;
      // 给BACK元素设置自定义属性，传递偏移值给CSS
      backEl.style.setProperty('--offset-x', `${offsetX}px`);
    }
  })
})

// 页面加载完成后触发一次，初始化默认选中项的位置
window.addEventListener('load', () => {
  const checkedRadio = document.querySelector('input[name="tap"]:checked');
  checkedRadio?.dispatchEvent(new Event('change'));
})

修改#back::after的transform样式，使用JS传递的自定义属性：

.bottombarcontainer .bottombar #back::after {
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  background: #66ccff;
  border-radius: 50%;
  margin-top: -20px;
  /* 使用JS传入的偏移变量 */
  transform: translate(var(--offset-x, 5px), 0);
  will-change: transform;
  transition: transform 0.2s ease;
}