Event beforetransition fires before page has layout

[GoogleCodeExporter]

Internal page components that need to resize before a transition, do not have 
an event to do so. An example is a map that loads in a secondary page, and 
cannot determine its size since the page has no layout.

beforetransition event happens when the page’s display=none, so there is no 
layout and components cannot resize. 
aftertransition event is too late, the user will see the components change 
size. 

A solution is to move beforetransition after the call to
toPage.setAttribute("selected", "true"); 
Then we don't need a new event. 
It seems to me that this is the right place for the event, but I am only 
looking at it from my application's point of view.

An alternative is to add a new event:
toPage.setAttribute("selected", "true"); 
toPage.style.webkitTransitionDuration = '';   // Turn transitions back on 
//MOD: Added new event to resize elements after layout, before transition (page 
has layout but is outside of the viewport) 
sendEvent("afterSelected", toPage);

At this phase the new page has display=block, so it has layout. 
Internal components of the page can resize before the transition, so the user 
only sees them in the final size. 

Original issue reported on code.google.com by san0f...@gmail.com on 28 Sep 2011 at 2:09

[GoogleCodeExporter]

You know this one is really relevant to iUI 0.40.  We're trying to create an 
API (or, actually, event model) for iUI extensions.  I experimented with a 
bunch of them myself and have refined the events somewhat.

It looks like I may have missed something.

Can you provide an example and tell me how to reproduce this one?

Original comment by msgilli...@gmail.com on 30 Sep 2011 at 7:53

• Added labels: Milestone-REL-0.40

[GoogleCodeExporter]

A use case:
Create an iui html page with two internal screens. Page1 is selected and has a 
link to page2. Page2 has a google map with 100% width/height.

Add a listener on page2:
function onDeviceReady () {

   var map = // new google map

   document.getElementById ('Page2')
   .addEventListener("beforetransition",
      function(){google.maps.event.trigger(tour.map, 'resize');},
      false);
};
window.addEventListener('load', onDeviceReady, false);

Now run the page and click on the link from page1 to page2. The map normally 
does not resize. While on page2 flip the phone from portrait to landscape. Now 
notice the map resizes, since it has the dimensions of the parent.

Now move the code that fires beforetransition a couple of lines below, after 
toPage.setAttribute("selected", "true"). It should work flawlessly there.

This happens with the function slide2(). I am not sure whether this issue 
exists with slide1()

Original comment by san0f...@gmail.com on 30 Sep 2011 at 8:14

[GoogleCodeExporter]

Original comment by msgilli...@gmail.com on 23 Jan 2012 at 9:58