How to handle when neon-animated page animation is completed in Polymer 1.0?

Question

Once the page is neon-animatableselected, is there a page animation completion event handler? The method _onNeonAnimationFinishI used here only handles the container's animation event dom-module.

fragment of the template:

<neon-animated-pages class="fit" selected="{{selectedPage}}" attr-for-selected="id" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation" on-iron-select="_pageChanged">
    <neon-animatable id="page1" class="fit">1</neon-animatable>
    <neon-animatable id="page2" class="fit">2</neon-animatable>
    <neon-animatable id="page3" class="fit">3</neon-animatable>
</neon-animated-pages>

script:

Polymer({
  is: "popup-view",

  behaviors: [
      Polymer.PaperDialogBehavior,
      Polymer.NeonAnimationRunnerBehavior
    ],

  listeners: {
    'neon-animation-finish': '_onNeonAnimationFinish'
  },

  _onNeonAnimationFinish: function() {
    console.log("*** _onNeonAnimationFinish ***"); // only called when container animation completes
    if (this.opened) {
      this._finishRenderOpened();
    } else {
      this._finishRenderClosed();
    }
  },

Answer 1

Try adding an event handler to the element <neon-animated-pages>.

<neon-animated-pages on-neon-animation-finish="_onNeonAnimationFinish" ...