如何将交替侧滑入场动画的jQuery函数转换为React实现

这是基于transform实现的交替侧方入场动画效果 #

我经常在各类应用中使用这段代码为页面添加轻量动效，但React中无法直接使用jQuery，请问该如何在React应用中实现完全一致的功能？ #

HTML代码

<div class="box-wrapper loading"><div class="box"></div></div>
<div class="box-wrapper loading"><div class="box"></div></div>

CSS代码

body {
 overflow-x: hidden;
}
.box-wrapper {
 -webkit-transition-duration: 600ms;
 transition-duration: 600ms;
}
.box-wrapper.loading:nth-child(odd) {
 transform: translate(100%);
}
.box-wrapper.loading:nth-child(even) {
 transform: translate(-100%);
}

待转换的原jQuery代码： #

Javascript代码

$(".box-wrapper").each(function (index, element) {
 setTimeout(function () {
   element.classList.remove("loading");
 }, index * 600);
});

实现方法 #

你原有CSS代码不需要任何修改，直接放到项目的全局样式或者对应组件的样式文件里即可，核心是把jQuery直接操作DOM删类名的逻辑，改成React的状态驱动类名切换，和原效果完全一致的函数组件实现如下：

import { useEffect, useState } from 'react';
// 引入写好上述CSS的样式文件
import './animation.css';

export default function SlideInBoxes() {
  // 数组长度对应需要渲染的box数量，按需修改即可
  const [boxes] = useState(Array.from({ length: 2 }));
  const [activeIndexes, setActiveIndexes] = useState(new Set());

  useEffect(() => {
    const timers = [];
    // 对齐原jQuery的遍历逻辑，按索引递增加延时
    boxes.forEach((_, index) => {
      const timer = setTimeout(() => {
        setActiveIndexes(prev => {
          const updated = new Set(prev);
          updated.add(index);
          return updated;
        });
      }, index * 600);
      timers.push(timer);
    });

    // 组件卸载时清除定时器，避免内存泄漏
    return () => timers.forEach(clearTimeout);
  }, [boxes]);

  return (
    <>
      {boxes.map((_, index) => (
        <div
          key={index}
          // 对应原逻辑：动画触发后移除loading类名
          className={`box-wrapper ${activeIndexes.has(index) ? '' : 'loading'}`}
        >
          <div className="box" />
        </div>
      ))}
    </>
  );
}

• 动画表现和原jQuery实现完全对齐：奇数位元素从右侧滑入视口，偶数位从左侧滑入，相邻元素动画触发间隔600ms，单元素动画时长600ms
• 如果需要调整渲染的box总数，只需要修改Array.from({ length: 2 })里的length数值即可，动画逻辑不需要改动
• 如果使用类组件写法，逻辑完全一致：在componentDidMount生命周期里设置对应延时，通过state更新来控制每个元素的类名即可，核心差异就是不要直接操作DOM元素的classList，用状态驱动视图更新。

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