Gatsby: [v2] Wrapping pages with layout causes CSS Transition issues

[juliettepretot]

My v1 page features a cute little animation when navigating between pages. The animations are realized using react routers activeClassName and css transitions.

This breaks when migrating to v2 according to the migration guide:

The reason is the following: In v2 the layout component gets unmounted and mounted every time I navigate from one page to another:

This is because in v2 every page is individually wrapped with my layout component. On navigation the entire page, including its wrapper gets unmounted. In v1 the pages were being merely exchanged inside of layout.

The entire layout being remounted means that CSS does not consider the activeClassName to be applied to an existing element, instead a new element which happens to have this className appears. This means that the transition never fires.

Any idea if it is at all possible to avoid this?

---

See the page source code here: https://github.com/juliettepretot/juliette.sh

[LekoArts]

+1
Would also strongly be interested in a solution to this!

[jonbellah]

For posterity, I reported a similar issue here: https://github.com/gatsbyjs/gatsby/issues/6127

[m-allanson]

Closing this in favour of #6127, so discussion is focussed to one issue.