ReactJS MUI Box点击后如何实现平滑CSS过渡效果？

• 补全伪元素基础样式
  伪元素:after必须设置content属性才能被浏览器渲染，同时需要明确的定位、尺寸等样式，否则元素可能根本不显示，过渡效果自然无从谈起。示例代码：

  after: {
    content: '""',
    position: 'absolute',
    top: '2px',
    left: '2px',
    width: '24px',
    height: '24px',
    borderRadius: '50%',
    backgroundColor: '#fff',
    transition: 'transform 300ms linear',
    transform: 'translateX(0)' /* 设置初始位置 */
  }
  

• 根据开关状态动态切换transform值
  你当前把transform固定写为translateX(120px)，没有随开关状态变化，过渡需要两个不同的状态值才能生效。利用styled-components的props绑定状态，示例如下：

  const Switch = styled.div<{ isChecked: boolean }>`
    position: relative;
    width: 52px;
    height: 28px;
    border-radius: 14px;
    background-color: ${props => props.isChecked ? '#4CAF50' : '#ccc'};
    cursor: pointer;
  
    &:after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background-color: #fff;
      transition: transform 300ms linear;
      /* 根据isChecked状态切换滑块位置 */
      transform: ${props => props.isChecked ? 'translateX(24px)' : 'translateX(0)'};
    }
  `;
  

  然后在组件中通过状态控制这个props：

  const [isChecked, setIsChecked] = useState(false);
  
  return (
    <Switch 
      isChecked={isChecked}
      onClick={() => setIsChecked(!isChecked)}
    />
  );
  

• 检查父容器的定位设置
  确保开关的父div设置了position: relative，这样伪元素的absolute定位才会相对于父容器生效，否则滑块可能跑到奇怪的位置，移动效果无法正常展示。

• 确认过渡属性的有效性
  过渡属性transition: transform 300ms linear本身是正确的，但要保证transform的值确实在开关状态切换时发生了变化——如果值一直不变，过渡自然不会触发。

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