solid-router: css animations are re-triggered after query updates

[PierBover]

Which project does this relate to?

Router

Describe the bug

When using query with solid router, the routes are remounted when the query updates which unfortunately causes CSS animations to retrigger.

tanstack.mov

When the route mounts, the red rectangle will fade in which is expected. But after a few seconds it will re-flash again when the query updates because it seems the route DOM element is remounted.

Complete minimal reproducer

https://github.com/PierBover/tanstack-solid-router-repro

Steps to Reproduce the Bug

npm i && npm run dev

Then navigate between the routes.

Expected behavior

The route should not be remounted and CSS animations should not be re-triggered. The query data should be updated reactively, probably?

Platform

    "@tanstack/solid-query": "5.101.4",
    "@tanstack/solid-router": "latest",
    "solid-js": "^1.9.12"

I'm on macOS Sequoia and I've seen this happening in both Chrome and Firefox.

[PierBover]

I've reproduced this in the official basic-solid-query-file-based example.

Screen.Recording.2026-08-08.at.12.29.51.p.m.mov

I added 10 seconds of stale time to the query options:

export const postQueryOptions = (postId: string) =>
  queryOptions({
    queryKey: ['posts', { postId }],
    queryFn: () => fetchPost(postId),
    staleTime: 10000
  })

Then added a fade-in class to the post route to show the re-triggering of CSS animations.

@keyframes fade-in {
	from {opacity: 0;}
	to {opacity: 1;}
}

.fade-in {
	animation-name: fade-in;
	animation-iteration-count: 1;
	animation-duration: .5s;
	animation-fill-mode: forwards;
}

    <div class="space-y-2 fade-in">
      <h4 class="text-xl font-bold underline">{post().data?.title}</h4>
      <div class="text-sm">{post().data?.body}</div>
    </div>