fix: avoid performance domain list disappearing on return

This commit is contained in:
ittoview
2026-05-23 03:31:59 +01:00
parent c49ff2a6fc
commit 8ca1d820aa

View File

@@ -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 (
<motion.div key={domain.id} variants={itemVariants}>
<motion.div key={domain.id} variants={activeItemVariants}>
{canOpen ? (
<Link
to={`/performance-domains/${domain.id}`}