shiyue/ittoview
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(动画): 优化ITTO显示隐藏过渡效果

Browse Source 
使用maxHeight+opacity替代height动画，消除滚动条跳动问题

via [HAPI](https://hapi.run)

Co-Authored-By: HAPI <noreply@hapi.run>
This commit is contained in:
ittoview
2026-02-22 14:28:40 +00:00
parent b5f6f47138
commit 943ad2fe85
1 changed files with 18 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/pages/ProcessDetailPage.tsx
View File

@@ -228,9 +228,12 @@ export function ProcessDetailPage() {
</button>
</div>
<motion.div
animate={{ height: visible.inputs ? 'auto' : 48, opacity: 1 }}
animate={{
maxHeight: visible.inputs ? 2000 : 0,
opacity: visible.inputs ? 1 : 0
}}
initial={false}
transition={{ duration: 0.25, ease: 'easeInOut' }}
transition={{ duration: 0.3, ease: 'easeInOut' }}
style={{ overflow: 'hidden' }}
>
{visible.inputs ? (
@@ -261,9 +264,7 @@ export function ProcessDetailPage() {
})}
</ul>
) : (
<div className="px-3 py-3 text-center text-xs text-gray-500 dark:text-gray-400">
{processDetail.inputs.length} 项已隐藏
</div>
<div className="h-0" />
)}
</motion.div>
</div>
@@ -287,9 +288,12 @@ export function ProcessDetailPage() {
</button>
</div>
<motion.div
animate={{ height: visible.tools ? 'auto' : 48, opacity: 1 }}
animate={{
maxHeight: visible.tools ? 2000 : 0,
opacity: visible.tools ? 1 : 0
}}
initial={false}
transition={{ duration: 0.25, ease: 'easeInOut' }}
transition={{ duration: 0.3, ease: 'easeInOut' }}
style={{ overflow: 'hidden' }}
>
{visible.tools ? (
@@ -320,9 +324,7 @@ export function ProcessDetailPage() {
})}
</ul>
) : (
<div className="px-3 py-3 text-center text-xs text-gray-500 dark:text-gray-400">
{processDetail.tools.length} 项已隐藏
</div>
<div className="h-0" />
)}
</motion.div>
</div>
@@ -346,9 +348,12 @@ export function ProcessDetailPage() {
</button>
</div>
<motion.div
animate={{ height: visible.outputs ? 'auto' : 48, opacity: 1 }}
animate={{
maxHeight: visible.outputs ? 2000 : 0,
opacity: visible.outputs ? 1 : 0
}}
initial={false}
transition={{ duration: 0.25, ease: 'easeInOut' }}
transition={{ duration: 0.3, ease: 'easeInOut' }}
style={{ overflow: 'hidden' }}
>
{visible.outputs ? (
@@ -379,9 +384,7 @@ export function ProcessDetailPage() {
})}
</ul>
) : (
<div className="px-3 py-3 text-center text-xs text-gray-500 dark:text-gray-400">
{processDetail.outputs.length} 项已隐藏
</div>
<div className="h-0" />
)}
</motion.div>
</div>