React-bootstrap Tabs在交互时缩小选项卡内容

import { Tabs, Tab } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

<Tabs defaultActiveKey="home" id="tab-example">
  <Tab eventKey="home" title="Home">
    <div className="tab-content">
      <h1>Home Content</h1>
      {/* 添加其他内容 */}
    </div>
  </Tab>
  <Tab eventKey="profile" title="Profile">
    <div className="tab-content">
      <h1>Profile Content</h1>
      {/* 添加其他内容 */}
    </div>
  </Tab>
  {/* 添加其他选项卡 */}
</Tabs>

.tab-content {
  transition: transform 0.3s ease-in-out;
}

.tab-content.zoom-out {
  transform: scale(0.8);
}

function handleTabSelect(key) {
  const tabContent = document.querySelector(`#${key} .tab-content`);
  tabContent.classList.toggle('zoom-out');
}

<Tabs defaultActiveKey="home" id="tab-example" onSelect={handleTabSelect}>
  {/* ... */}
</Tabs>