feat(页面动画): 添加返回页面时跳过动画的效果
在知识领域页面添加检测机制,当用户返回页面时跳过入场动画 使用 useRef 记录访问状态,通过 useEffect 标记已访问 根据访问状态选择不同的动画变体实现平滑过渡
This commit is contained in:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user