on-core-animated-pages-transition-prepare not firing/

[Nas-r]

Morris.js chart doesn't display properly within Polymer core-animated-pages > section > core-animated-pages > section > card > div.

It works fine if I resize the window, the chart just displays weird when it's first injected into the page. I'm guessing it's not grabbing the right div dimensions.

So I've been trying to use core-animated-pages-transition-prepare. I've attempted the following:

<core-animated-pages id="form1" on-core-animated-pages-transition-prepare="onPrepare();" selected="0" transitions="slide-from-right" cross-fade>     

var form1 = document.getElementById("form1");
function onPrepare() {
        if (form1.selected==6) {
            gBar();
        } ...etc

I've also tried things like:

document.getElementById("form1").addEventListener('core-animated-pages-transition-prepare', function() {     
  alert('Hi');
});

and

document.getElementById("form1").on('core-animated-pages-transition-prepare', function() {     
  alert('Hi');
});

[ovangle]

I was running into this same problem today. The problem (for me at least) is that selectedItemChanged aborts if there is a no-transition attribute or if there are no transitions. Which is sensible, but I also need to know when the page has been drawn, so I can resize the container appropriately.

Also, the method aborts when there is no previous selected item, so I can't bind to the transition-prepare event to resize the container when the first page is loaded.