Core-animated-pages inside pages

[zdarovka]

Hi, I am using app-router with animation between routes. In some of my pages I have core-animated-pages element that animates the content inside. The problem is that when the inner transition ends, app-router catches this event and then removes whole page.

Line 80 in app-router.js

// when a transition finishes, remove the previous route's content. there is a temporary overlap where both
// the new and old route's content is in the DOM to animate the transition.
router.coreAnimatedPages.addEventListener('core-animated-pages-transition-end', function() {
      transitionAnimationEnd(router.previousRoute);
});

Is it possible to use core-animated pages inside page routes with core-animated-pages enabled on router?

[erikringsmuth]

Can you post a simple code example?

Is it differnet than this?

<app-router core-animated-pages transitions="cross-fade">
  <app-route path="/first" import="/pages/first-page.html">
    <!-- the router adds first-page when routing to /first -->
    <first-page></first-page>
  </app-route>
  <app-route path="/second" import="/pages/second-page.html">
    <!-- the router adds second-page when routing to /second -->
    <second-page></second-page>
  </app-route>
</app-router>

When it finishes transitioning from first-page to second-page it would remove first-page from the DOM. Normally I don't think it would remove anything from the new route, just the old route.

[zdarovka]

Sorry you missunderstand me because of my poor English.

I have this:

<app-router core-animated-pages transitions="cross-fade">
  <app-route path="/first" import="/pages/first-page.html">
    <!-- the router adds first-page when routing to /first -->
    <first-page></first-page>
  </app-route>
  <app-route path="/second" import="/pages/second-page.html">
    <!-- the router adds second-page when routing to /second -->
    <second-page></second-page>
  </app-route>
</app-router>

And the <second-page> look like this:

<polymer-element name="second-page" >
    <template>
              <core-animated-pages transitions="cross-fade-all" >
                     <section id="1"></section>
                     <section id="2"></section>
               </core-animated-pages>
    </template>
</polymer-element>

I think the solution would be to add another route for pages inside /second. But the content in section #1 and #2 is ajax bound to rest api, and I don't want to fetch those data again because of navigating

[erikringsmuth]

So what does your URL change look like? Do you go from /second to /second and it replaces the whole view?

[zdarovka]

I am not navigating at all. The transistion between section 1 and 2 is completly without router. It just animation between content.

You can look at it on my currently developing app. When you click on tile it animates to detail. The problem occurs only if there has been some routing done (router.previousRoute is not null)

[erikringsmuth]

Oh! I get what you're saying now. I thought listening for this event was only doing it on the router's core-animated-pages element https://github.com/erikringsmuth/app-router/blob/master/src/app-router.js#L80. I'll have to look into this.

[zdarovka]

I solved it with stopping propagation of event:

animationEnd: function (e) {
    //some other code

    e.stopPropagation();
}