[Bug]: Astro: Drawer Reveal Animation not showing after navigation (View Transitions)

[preetamslot]

Reproduction

:(

Describe the bug

Astro: Drawer Reveal Animation not showing after navigation (View Transitions)

This only happens when you enable https://docs.astro.build/en/guides/view-transitions/

Drawer-Bug-1.mp4

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 AMD Ryzen 7 4700U with Radeon Graphics
    Memory: 4.54 GB / 15.39 GB
  Binaries:
    Node: 22.0.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.5.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.9.0 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Chrome: 126.0.6478.127
    Edge: Chromium (126.0.2592.81)
    Internet Explorer: 11.0.22621.3527

Contributes

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests

[florian-lefebvre]

Without a minimal reproduction it's hard to say but I think it may be because you need to persist this component using transition:persist

[preetamslot]

It was that CSS is injected into the page, this gets lost with navigation with the View Transitions API.
Fix was to manually add the needed css.