新增列表项时实现整列表左滑入场动画的问题

当counts数组新增元素时，希望整个列表平滑过渡左滑至默认位置，但目前仅新增的单个count元素呈现该动画效果。

要实现整个列表的左滑过渡，需将动画作用于包含所有count元素的容器，而非单个元素。以下是调整后的代码：

修改后的App.js #

export default function App() {
  const [counts, setCounts] = React.useState([1]);
  const innerRef = React.useRef(null);

  const increment = () => {
    const value = counts.length + 1;
    setCounts((prevState) => [...prevState, value]);
  };

  React.useEffect(() => {
    if (innerRef.current) {
      // 添加动画类触发整体左滑
      innerRef.current.classList.add('slide-in');
      // 动画结束后移除类，以便下次新增元素时重新触发
      const handleEnd = () => {
        innerRef.current.classList.remove('slide-in');
        innerRef.current.removeEventListener('animationend', handleEnd);
      };
      innerRef.current.addEventListener('animationend', handleEnd);
    }
  }, [counts]);

  return (
    <div className="App">
      <button onClick={increment}>Increment</button>
      <div className="wrapper">
        <div ref={innerRef} className="inner">
          {counts.map((count) => {
            return <p key={count}>{count}</p>;
          })}
        </div>
      </div>
    </div>
  );
}

修改后的CSS #

.App {
  font-family: sans-serif;
  text-align: center;
}

.wrapper {
  width: 100%;
  background-color: tomato;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  overflow: hidden; /* 避免动画时内容溢出容器 */
}

.inner {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* 整体列表的左滑动画 */
.inner.slide-in {
  animation: slideIn 400ms ease forwards;
}

@keyframes slideIn {
  from {
    transform: translateX(20px);
  }
  to {
    transform: translateX(0);
  }
}

.wrapper > .inner > p {
  margin: 0;
  padding: 8px;
}

原理说明 #

• 新增inner容器包裹所有count元素，将动画作用于该容器，实现整体同步左滑。
• 通过useEffect监听counts数组变化，每次新增元素时给inner容器添加动画类触发过渡。
• 使用transform: translateX替代left属性，动画性能更优，且能保证容器内所有元素同步移动。

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