如何在react导航中使用从右到左的动画在模态之间导航

import { Link } from 'react-router-dom';

const Navigation = () => {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/modal1">Modal 1</Link>
        </li>
        <li>
          <Link to="/modal2">Modal 2</Link>
        </li>
      </ul>
    </nav>
  );
};

import { BrowserRouter as Router, Route } from 'react-router-dom';

const App = () => {
  return (
    <Router>
      <div>
        <Navigation />

        <Route path="/modal1" component={Modal1} />
        <Route path="/modal2" component={Modal2} />
      </div>
    </Router>
  );
};

import React, { useState } from 'react';
import './Modal.css';

const Modal1 = () => {
  const [showModal, setShowModal] = useState(false);

  const toggleModal = () => {
    setShowModal(!showModal);
  };

  return (
    <div className={`modal ${showModal ? 'show' : ''}`}>
      <h2>Modal 1</h2>
      <button onClick={toggleModal}>Close</button>
    </div>
  );
};

.modal {
  position: absolute;
  top: 0;
  right: -100%;
  width: 300px;
  height: 200px;
  background-color: #fff;
  transition: right 0.3s ease-in-out;
}

.modal.show {
  right: 0;
}

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import './Navigation.css';

const Navigation = () => {
  const [showModal, setShowModal] = useState(false);

  const toggleModal = () => {
    setShowModal(!showModal);
  };

  return (
    <nav>
      <ul>
        <li>
          <Link to="/modal1" onClick={toggleModal}>
            Modal 1
          </Link>
        </li>
        <li>
          <Link to="/modal2" onClick={toggleModal}>
            Modal 2
          </Link>
        </li>
      </ul>
    </nav>
  );
};