fix(pdf): suppress root view-transition animation to isolate fade to PDF pane only
Build and Deploy Verso / deploy (push) Successful in 11m47s
Build and Deploy Verso / deploy (push) Successful in 11m47s
document.startViewTransition generates both a named pseudo-element for the PDF container (ol-pdf-viewer) and a root-level pseudo-element that covers the entire page, causing the editor to fade along with the PDF. Inject a temporary <style> that sets animation:none on the root pseudo-elements before starting the transition, then remove it in transition.finished. Only the named PDF container crossfades; the editor is unaffected. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -157,15 +157,23 @@ export default class PDFJSWrapper {
|
||||
) {
|
||||
// Chrome 111+ / Edge 111+: document-level View Transition.
|
||||
// Give the PDF container a unique view-transition-name so only it
|
||||
// crossfades; the rest of the page stays static.
|
||||
// crossfades. We also suppress the auto-generated root-level animation
|
||||
// (which would otherwise fade the entire page including the editor) by
|
||||
// injecting a temporary <style> that sets animation:none on the root
|
||||
// pseudo-elements. The style is removed after the transition finishes.
|
||||
const name = 'ol-pdf-viewer'
|
||||
this.container.style.viewTransitionName = name
|
||||
const noRootAnim = document.createElement('style')
|
||||
noRootAnim.textContent =
|
||||
'::view-transition-old(root),::view-transition-new(root){animation:none}'
|
||||
document.head.appendChild(noRootAnim)
|
||||
const transition = doc_.startViewTransition(async () => {
|
||||
setDocument()
|
||||
await firstPageRendered
|
||||
})
|
||||
transition.finished.finally(() => {
|
||||
this.container.style.viewTransitionName = ''
|
||||
noRootAnim.remove()
|
||||
})
|
||||
transition.ready.catch(onTransitionError)
|
||||
} else {
|
||||
|
||||
Reference in New Issue
Block a user