ViewTransition causes JavaScript code to not execute

[Albertyhu]

Astro Info

Astro                    v4.7.1
Node                     v18.17.1
System                   Windows (x64)
Package Manager          npm
Output                   server
Adapter                  @astrojs/node
Integrations             @astrojs/tailwind
                         @astrojs/react

If this issue only occurs in one browser, which browser is a problem?

Chrome, Firefox

Describe the Bug

I am currently creating a website for a lawyer.

It should function as follows:

1. When the user scrolls down a webpage, a minimized version of the navigation bar should appear into the screen from the top.
2. In the mobile version, the burger icon appears in the navigation bar. When the user clicks on the burger icon, the mobile navigation menu should appear into the screen from the left.

This is all done with JavaScript and the code can be seen in the following Github file:
https://github.com/Albertyhu/lawyer-website/blob/main/public/script/nav-script.js

The script file is linked to a layout that is used throughout the webpages as seen in this file:
https://github.com/Albertyhu/lawyer-website/blob/main/src/layout/BaseLayout.astro

However, when I implemented ViewTransitions after following the Astro's documentation, I experienced a bug.

When the website is up and I navigate from one page to another, the JavaScript code for the minimized navigation bar and the mobile menu stops executing.

I notice that when I refresh the webpage I am on, the JavaScript code does work.
However, once I navigate to another webpage, it stops working again.

The ViewTransitions animations do work, but it causes the JavaScript code for the minimized navigation bar and the mobile menu to not work.

When I removed ViewTransitions, the JavaScript code works as intended.

I appreciate any help I can get.

What's the expected result?

If the JavaScript code were to work correctly while ViewTransitions is implemented, clicking on the burger menu icon should cause the mobile menu to open up and slide in from the left.

If the user scrolls down a webpage, a minimized navigation bar should appear from the top into the screen. Its mobile menu icon should also work.

This should work without the need to refresh the page for the mobile menu to work.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-hiwzkt?file=src%2Flayout%2FBaseLayout.astro

Participation

• I am willing to submit a pull request for this issue.

[Princesseuh]

You need to make your script that attaches the handlers rerun: https://docs.astro.build/en/guides/view-transitions/#script-behavior-with-view-transitions

[Albertyhu]

@Princesseuh Thank you. It's working now.