react使用自定义animation实现水平效果的路由切换
例如：A组件跳B组件
A组件：
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> ); }
css样式：
*{ 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%; } }