🐛 fix(vscode): 代码阅读预览跳转后的闪烁按动画时长到点摘掉,滚到画面外被跳过排版的块里动画停着等不到结束事件,上一处不再一直闪着

This commit is contained in:
cruldra committed 2026-10-13 15:21:50 +11:00
1 parent 8a5d3761fd
commit af1c089506
2 files changed
+19 -17

No files matched your search

+16 -14
View File
@@ -6,22 +6,24 @@ import { pageLayout } from './pageLayout'
import { revealPlan, scrollTopToShow, uncoveredPlan } from './reveal'
import { stickyHeight } from './useStickyScroll'
/** 让一块或属性表里的一行闪几下(codeReader.css 的 [data-flash]);正在闪的同一处再跳一次时从头闪。 */
/** 正在闪的元素和到点摘掉 data-flash 的计时器 */
const flashing = new WeakMap<HTMLElement, number>()
/**
* 让一块或属性表里的一行闪几下(codeReader.css 的 [data-flash]);正在闪的同一处再跳一次时从头闪。
* 闪完(按 CSS 动画的时长)摘掉 data-flash:用计时器而不是等 animationend,滚到画面外被跳过排版的块(content-visibility)里动画停着,等不到它。
*/
export function flash(el: HTMLElement): void {
const running = el.getAnimations().filter(animation => animation instanceof CSSAnimation)
if (running.length > 0) {
for (const animation of running)
animation.currentTime = 0
return
}
const onEnd = (event: AnimationEvent): void => {
if (event.target !== el)
return
el.removeAttribute('data-flash')
el.removeEventListener('animationend', onEnd)
}
el.addEventListener('animationend', onEnd)
window.clearTimeout(flashing.get(el))
el.setAttribute('data-flash', '')
const animations = el.getAnimations().filter(animation => animation instanceof CSSAnimation)
for (const animation of animations)
animation.currentTime = 0
const end = Math.max(0, ...animations.map(animation => Number(animation.effect?.getComputedTiming().endTime ?? 0)))
flashing.set(el, window.setTimeout(() => {
el.removeAttribute('data-flash')
flashing.delete(el)
}, end))
}
/** 把 el 滚进钉住的筛选栏和卡片下面的视口,量之前先把它那一带排版好(pageLayout.settle)。已经整个看得见就不滚。beforeScroll 在真正滚动前拿到将要落到的位置。 */