diff --git a/src/pages/PerformanceDomainsPage.tsx b/src/pages/PerformanceDomainsPage.tsx index b6f08ee..5fb695a 100644 --- a/src/pages/PerformanceDomainsPage.tsx +++ b/src/pages/PerformanceDomainsPage.tsx @@ -1,3 +1,4 @@ +import { useEffect, useRef } from 'react' import { Link, useParams } from 'react-router-dom' import { motion } from 'framer-motion' import { @@ -27,6 +28,12 @@ const itemVariants = { visible: { opacity: 1, y: 0 }, } +// 返回页面时直接显示内容,避免移动端浏览器恢复页面时动画停留在透明状态 +const skipAnimationVariants = { + hidden: { opacity: 1, y: 0 }, + visible: { opacity: 1, y: 0 }, +} + const iconMap = { PD01: Handshake, PD02: Users, @@ -42,6 +49,17 @@ export function PerformanceDomainsPage() { const { id } = useParams() const selectedDomain = id ? performanceDomainMap.get(id) : null + // Android Chrome 返回页面时可能从 bfcache 恢复,Framer Motion 子项偶发停在 hidden 状态。 + // 首次进入保留入场动画;页面恢复或再次渲染时跳过子项动画,确保列表始终可见。 + const hasVisitedRef = useRef(false) + const shouldSkipAnimation = hasVisitedRef.current + + useEffect(() => { + hasVisitedRef.current = true + }, []) + + const activeItemVariants = shouldSkipAnimation ? skipAnimationVariants : itemVariants + if (selectedDomain?.detail) { const Icon = iconMap[selectedDomain.id as keyof typeof iconMap] const detail = selectedDomain.detail @@ -205,7 +223,7 @@ export function PerformanceDomainsPage() { const canOpen = Boolean(domain.detail) return ( - + {canOpen ? (