React自定义开关组件margin的transition过渡无动画效果如何解决

问题原因 #

滑块过渡不生效的核心是margin-left: auto不属于可过渡的CSS属性值。CSS过渡要求属性的起始值和结束值必须为可量化的数值类型，auto是浏览器动态计算的特殊值，无法完成两个状态间的插值计算，因此不会触发过渡动画。

解决方案 #

推荐使用性能更高的transform属性实现滑块位移，既可以规避auto值的问题，还能避免动画触发重排，流畅度更高，修改后的CSS如下：

.switch div {
  height: 5rem;
  width: 5rem;
  border-radius: 2.5rem;
  background-color: white;
  /* 替换margin-left过渡为transform过渡 */
  transition: transform 1s;
}

.switch-on div {
  /* 替换margin-left: auto，位移宽度等于滑块自身宽度，刚好移到右侧 */
  transform: translateX(100%);
}

如果需要保留margin实现方式，给margin-left设置明确的起始和结束数值即可：

.switch div {
  height: 5rem;
  width: 5rem;
  border-radius: 2.5rem;
  background-color: white;
  transition: margin-left 1s;
  /* 明确设置起始值 */
  margin-left: 0;
}

.switch-on div {
  /* 替换auto为具体数值，容器宽度10rem，滑块宽度5rem，刚好到右侧 */
  margin-left: 5rem;
}

额外优化建议 #

你的React组件状态可以用布尔值替换空字符串，代码可读性更高：

export function Switch({callBackOn, callBackOff}){
  const [isOn, setIsOn] = useState(false);

  function callback(){
    setIsOn(prev => !prev)
  }
  return(
    <div onClick={callback} className={`switch ${isOn ? 'switch-on' : ''}`}>
      <div></div>
    </div>
  )
}

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