react如何实现跳转过渡
实现页面跳转过渡的方法
在React中实现页面跳转过渡效果，通常需要结合路由库和动画库。以下是几种常见方法：
使用React Transition Group与React Router
安装必要依赖：
npm install react-transition-group react-router-dom示例代码实现淡入淡出效果：
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import { Switch, Route, useLocation } from 'react-router-dom'
function App() {
const location = useLocation()
return (
<TransitionGroup>
<CSSTransition
key={location.key}
timeout={300}
classNames="fade"
>
<Switch location={location}>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</Switch>
</CSSTransition>
</TransitionGroup>
)
}添加CSS过渡样式：
.fade-enter {
opacity: 0;
}
.fade-enter-active {
opacity: 1;
transition: opacity 300ms;
}
.fade-exit {
opacity: 1;
}
.fade-exit-active {
opacity: 0;
transition: opacity 300ms;
}使用Framer Motion动画库
Framer Motion提供更强大的动画控制：
npm install framer-motion示例实现滑动过渡：
import { AnimatePresence, motion } from 'framer-motion'
import { Switch, Route, useLocation } from 'react-router-dom'
function App() {
const location = useLocation()
return (
<AnimatePresence exitBeforeEnter>
<Switch location={location} key={location.pathname}>
<Route path="/" exact>
<motion.div
initial={{ x: 300, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
exit={{ x: -300, opacity: 0 }}
transition={{ duration: 0.5 }}
>
<Home />
</motion.div>
</Route>
</Switch>
</AnimatePresence>
)
}使用React Spring物理动画
React Spring基于物理属性实现更自然的过渡：
npm install react-spring示例代码：
import { useTransition, animated } from 'react-spring'
import { Switch, Route, useLocation } from 'react-router-dom'
function App() {
const location = useLocation()
const transitions = useTransition(location, {
from: { opacity: 0, transform: 'translate3d(100%,0,0)' },
enter: { opacity: 1, transform: 'translate3d(0%,0,0)' },
leave: { opacity: 0, transform: 'translate3d(-50%,0,0)' }
})
return transitions((props, item) => (
<animated.div style={props}>
<Switch location={item}>
<Route path="/" exact component={Home} />
</Switch>
</animated.div>
))
}自定义Hook实现页面过渡
创建自定义Hook管理过渡状态：
function usePageTransition() {
const [isTransitioning, setIsTransitioning] = useState(false)
const startTransition = useCallback(() => {
setIsTransitioning(true)
return new Promise(resolve => {
setTimeout(() => {
setIsTransitioning(false)
resolve()
}, 500)
})
}, [])
return { isTransitioning, startTransition }
}在组件中使用：
function Navigation() {
const { startTransition } = usePageTransition()
const history = useHistory()
const navigate = async (path) => {
await startTransition()
history.push(path)
}
return (
<button onClick={() => navigate('/about')}>
Go to About
</button>
)
}注意事项
- 过渡时间应与实际路由切换时间匹配，避免动画未完成就显示新内容
- 移动端需要考虑性能优化，复杂动画可能导致卡顿
- 对于SEO敏感项目，确保过渡动画不会影响内容可抓取性
- 测试不同路由切换场景，如前进/后退/直接访问等
以上方法可根据项目需求选择，简单过渡推荐React Transition Group，复杂动画推荐Framer Motion或React Spring。
