通过history.push渲染组件后触发右滑动画

import React from 'react';
import { useHistory } from 'react-router-dom';

const MyComponent = () => {
  const history = useHistory();

  const handleClick = () => {
    history.push('/target'); // 跳转到目标组件
  };

  return (
    <div>
      <button onClick={handleClick}>跳转</button>
    </div>
  );
};

export default MyComponent;

.slide-right {
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
}

.slide-right.active {
  transform: translateX(0%);
}

import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import './MyTargetComponent.css';

const MyTargetComponent = () => {
  const location = useLocation();

  useEffect(() => {
    // 当路由变化时添加动画类
    document.body.classList.add('slide-right');
    
    // 在动画完成后移除动画类
    const handleAnimationEnd = () => {
      document.body.classList.remove('slide-right');
    };
    document.body.addEventListener('animationend', handleAnimationEnd);

    return () => {
      document.body.removeEventListener('animationend', handleAnimationEnd);
    };
  }, [location]);

  return <div>目标组件</div>;
};

export default MyTargetComponent;