如何在React+Material UI中实现点击触发的CSS左右滑动切换动画？

当前问题总结 #

• 依赖硬编码定时器自动切换动画，无法通过第二次点击触发反向滑动
• 必须等待第一个动画结束才能再次交互
• 直接操作DOM修改类名，不符合React状态驱动的开发理念

1. 重构React组件逻辑 #

移除定时器和DOM操作，完全通过menuOpen状态控制动画方向，点击时直接翻转状态：

const Portfolio = ({menuOpen, setMenuOpen}) => {
  // 点击时直接翻转menuOpen状态，无需定时器
  const toggleSlide = () => {
    setMenuOpen(prev => !prev);
  }

  return (
    <Grid container className='PortfolioGrid' sx={{position: 'relative'}}>
      <Grid item xs={6} className='PortfolioLeft'>
        hello
      </Grid>
      <Grid item xs={6} className='PortfolioRight'>
        <Box
          onClick={toggleSlide}
          className={`PortfolioRightImg ${menuOpen ? 'slide-left' : 'slide-right'}`}
          component="img"
          alt="The house from the offer."
          src={img}       
        />
      </Grid>
    </Grid>
  );
}

2. 简化CSS动画配置 #

合并重复样式，用同一个基础类配合修饰类控制动画方向，同时保留动画结束状态：

.PortfolioGrid{
    background-color: aquamarine;

    .PortfolioLeft{
        background-color: bisque;
    }

    .PortfolioRight{
        background-color: rgb(205, 255, 220);

        .PortfolioRightImg{
            height: calc(100vh * 3/12);
            width: calc(100vw * 2/12);
            position: relative;
            animation-duration: 3s;
            animation-fill-mode: forwards;
        }

        /* 左滑动画 */
        .PortfolioRightImg.slide-left{
            animation-name: slide-left;
        }

        /* 右滑动画 */
        .PortfolioRightImg.slide-right{
            animation-name: slide-right;
        }
    }
}

@keyframes slide-left {
    from { left: 0; }
    to { left: calc((100vw * 2/12) * (-1)); }
}

@keyframes slide-right {
    from { left: calc((100vw * 2/12) * (-1)); }
    to { left: 0; }
}

关键改进点 #

• 状态驱动交互：通过React状态直接控制动画方向，点击即时响应，无需等待定时器
• 避免DOM操作：用动态className绑定替代原生DOM修改，符合React开发规范
• 样式复用：合并重复的基础样式，减少代码冗余
• 动画状态保持：通过animation-fill-mode: forwards让元素停在动画结束位置

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