react使用自定义animation实现水平效果的路由切换

import React from 'react';
import './A.scss'
import { useNavigate } from 'react-router-dom';
export default function A() {
    let navigate = useNavigate()
  return (
    <div onClick={()=>{
        let el = document.querySelector('.A')
        el.classList.add('Out')
        setTimeout(()=>{
            navigate('/b')
        },1000)
    }} className='A'>
      A
    </div>
  );
}

*{
    margin: 0;
    padding: 0;
}
.A{
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: red;
}
.Out{
    animation: out 1s linear 0s 1 normal forwards;
}
@keyframes out {
    from{
        left: 0;
    }
    to{
        left: -100%;
    }
}