core-animated-pages multiple paths match same app-route

[erikringsmuth]

This is an extension of PR https://github.com/erikringsmuth/app-router/pull/43 from @sohjsolwin.

Example router.

<app-router core-animated-pages transitions="cross-fade-all">
  <app-route path="/first" element="first-page"></app-route>
  <app-route path="/second" element="second-page"></app-route>
  <app-route path="/page/:pageNum" element="third-page"></app-route>
</app-router>

Paths /page/1 and /page/2 will both match the last route. The transition between these two pages won't be animated because setting coreAnimatedPages.selected = 3 doesn't change the page.

This may require a big re-think of the app-router / core-animated-pages implementation...

[headzoo]

I came here hoping to find a solution for this tiny bug. It's disappointing to lose the animation when going from one page to the next, because the path itself is the same.

[Mipme]

Could it be solved with a sub router? Maybe i don't want an animation between page ID 1 and ID 2, but one from page to first...

[headzoo]

It looks like app-router binds the core-animated-pages to the path attribute without any way of changing that.

// toggle the selected page using selected="path" instead of selected="integer"
router.coreAnimatedPages.setAttribute('valueattr', 'path');

Maybe a url attribute could be added to <app-router> which contains the current fully resolve URL, and give developers a chance to set the 'valueattr' for core-animated-pages to that url attribute. I'm not sure if that would work. I haven't tried. But it would give developers the option of animating on every URL change, or like you said, only animating on actual path changes.