如何为toggle切换按钮添加滑动切换动画效果？

实现思路 #

• 可以用伪元素实现滑动块，不需要额外添加DOM节点。你只需要给toggle bar的外层容器设置position: relative，给容器的::before或者::after伪元素设置绝对定位，作为滑动的背景块即可。
• 要让滑动块自适应激活项的宽度和位置，核心是通过CSS变量传递动态参数：
  1. 每次切换激活项时，通过JS获取当前激活按钮的两个属性：相对于外层容器的左偏移值offsetLeft、自身宽度offsetWidth
  2. 将这两个值作为CSS变量（比如命名为--active-left、--active-width）挂载到toggle bar的外层容器上
  3. 给伪元素设置left: var(--active-left)、width: var(--active-width)，同时给伪元素添加transition属性，指定对left和width属性做过渡动画
• 注意调整伪元素的z-index，保证它在容器背景之上、按钮文字之下，避免遮挡文字内容。
• 如果你不想用JS实现，也可以考虑用CSS相邻兄弟选择器配合单选框的checked状态实现，但适配性不如CSS变量方案灵活，和框架结合的成本更高。

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