fix: 修复 Markdown 代码块展开动画高度计算异常的问题
continuous-integration/drone/push Build is failing

This commit is contained in:
seahi committed 2026-08-08 14:45:16 +08:00
1 parent a4c38453f0
commit 5f2b237296
1 file changed
+25 -4
+25 -4
View File
@@ -400,14 +400,35 @@
codeBlock.classList.remove('is-open'); codeBlock.classList.remove('is-open');
codeBlock.classList.add('is-closed'); codeBlock.classList.add('is-closed');
} else { } else {
// 暂时关闭 transition 以获取真实的 scrollHeight (包括 padding)
const originalTransition = codeEl.style.transition;
codeEl.style.transition = 'none';
codeBlock.classList.remove('is-closed'); codeBlock.classList.remove('is-closed');
codeBlock.classList.add('is-open'); codeBlock.classList.add('is-open');
codeEl.style.maxHeight = codeEl.scrollHeight + 'px'; codeEl.style.maxHeight = 'none';
const targetHeight = codeEl.scrollHeight;
// 恢复关闭状态,准备开始动画
codeBlock.classList.remove('is-open');
codeBlock.classList.add('is-closed');
codeEl.style.maxHeight = '0px';
void codeEl.offsetHeight; // 强制 reflow
// 恢复 transition 并开始动画
codeEl.style.transition = originalTransition;
codeBlock.classList.remove('is-closed');
codeBlock.classList.add('is-open');
codeEl.style.maxHeight = targetHeight + 'px';
const handler = (e: Event) => { const handler = (e: Event) => {
if (e.target === codeEl && codeBlock.classList.contains('is-open')) { const transEvent = e as TransitionEvent;
codeEl.style.maxHeight = 'none'; if (e.target === codeEl && transEvent.propertyName === 'max-height') {
if (codeBlock.classList.contains('is-open')) {
codeEl.style.maxHeight = 'none';
}
codeEl.removeEventListener('transitionend', handler);
} }
codeEl.removeEventListener('transitionend', handler);
}; };
codeEl.addEventListener('transitionend', handler); codeEl.addEventListener('transitionend', handler);
} }