feat(页面动画): 添加返回页面时跳过动画的效果

在知识领域页面添加检测机制,当用户返回页面时跳过入场动画
使用 useRef 记录访问状态,通过 useEffect 标记已访问
根据访问状态选择不同的动画变体实现平滑过渡
This commit is contained in:
史悦
2026-02-04 17:31:26 +08:00
parent fee9f3db15
commit 59974c4969

View File

@@ -1,3 +1,4 @@
import { useEffect, useRef } from 'react'
import { Link, useParams } from 'react-router-dom'
import { motion } from 'framer-motion'
import { ArrowRight, FileText, Wrench, FileOutput } from 'lucide-react'
@@ -13,11 +14,29 @@ const itemVariants = {
visible: { opacity: 1, y: 0 },
}
// 跳过动画时的变体(立即显示)
const skipAnimationVariants = {
hidden: { opacity: 1, y: 0 },
visible: { opacity: 1, y: 0 },
}
export function KnowledgeAreasPage() {
const { id } = useParams()
const selectedKA = id ? knowledgeAreaMap.get(id) : null
const processes = id ? processesByKnowledgeArea.get(id) || [] : []
// 检测是否应该跳过动画(返回页面时)
const hasVisitedRef = useRef(false)
const shouldSkipAnimation = hasVisitedRef.current
useEffect(() => {
// 标记已访问,下次渲染时跳过动画
hasVisitedRef.current = true
}, [])
// 根据是否跳过动画选择变体
const activeItemVariants = shouldSkipAnimation ? skipAnimationVariants : itemVariants
if (selectedKA) {
return (
<div className="space-y-4">
@@ -59,7 +78,7 @@ export function KnowledgeAreasPage() {
{processes.map((process) => {
const pg = processGroupMap.get(process.processGroupId)
return (
<motion.div key={process.id} variants={itemVariants}>
<motion.div key={process.id} variants={activeItemVariants}>
<Link
to={`/process/${process.id}`}
className="group flex items-center gap-3 bg-white dark:bg-gray-800 rounded-lg p-3 shadow-sm border border-gray-100 dark:border-gray-700 hover:shadow-md hover:border-gray-200 dark:hover:border-gray-600 transition-all"
@@ -109,7 +128,7 @@ export function KnowledgeAreasPage() {
className="grid md:grid-cols-2 gap-3"
>
{knowledgeAreas.map((ka) => (
<motion.div key={ka.id} variants={itemVariants}>
<motion.div key={ka.id} variants={activeItemVariants}>
<Link
to={`/knowledge-areas/${ka.id}`}
className="group flex items-center gap-3 bg-white dark:bg-gray-800 rounded-lg p-3 shadow-sm border border-gray-100 dark:border-gray-700 hover:shadow-md transition-all"