如何拥有一个列表视图，它的子视图将在颤动中包装

import React from 'react';
import './ListWithBounce.css';

const ListWithBounce = () => {
  const items = Array.from({ length: 20 }, (_, index) => `Item ${index + 1}`);

  return (
    <div className="list-container">
      {items.map((item, index) => (
        <div key={index} className="list-item">
          {item}
        </div>
      ))}
    </div>
  );
};

export default ListWithBounce;

/* ListWithBounce.css */
.list-container {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  height: 300px; /* 设置一个固定高度以便滚动 */
}

.list-item {
  padding: 10px;
  margin: 5px;
  background-color: #f0f0f0;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-out;
}

.list-item:hover {
  transform: translateY(-5px);
}