flex4 - Flex 4 state transition Move effect in a VGroup -

i trying create nice state transition have 2 containers (in example below have used panels).

when state changes, want fade away upper panel, move lower panel top of screen, , below want fade in new 'lower' panel.

in code below, fades working fine, panel doesn't move top of box, goes it's new position without transition.

also 'reverse' transition doesn't happen @ all. tried set autoreverse true, , tried build opposite transition, both no result, there no transition.

when replace vgroup (in happens) vbox, better result, transition works in 1 way. reverse transition still doesn't work @ all.

<?xml version="1.0" encoding="utf-8"?> 

<fx:script>     <![cdata[         private function switchmode():void         {             if (currentstate == "up")                 currentstate = "down";             else                 currentstate = "up";         }     ]]> </fx:script>  <s:states>     <s:state name="up" />     <s:state name="down" /> </s:states>  <s:transitions>     <s:transition fromstate="up" tostate="down">         <s:sequence>             <s:fade target="{uppergrid}" />             <s:removeaction target="{uppergrid}" />             <s:move target="{panel1}" />             <s:addaction target="{lowergrid}" />             <s:fade target="{lowergrid}" />         </s:sequence>     </s:transition>      <s:transition fromstate="down" tostate="up">         <s:sequence>             <s:fade target="{lowergrid}" />             <s:removeaction target="{lowergrid}" />             <s:move target="{panel1}" />             <s:addaction target="{uppergrid}" />             <s:fade target="{uppergrid}" />         </s:sequence>     </s:transition> </s:transitions>  <s:vgroup width="100%" height="100%" top="10" left="10" right="10" bottom="10">     <s:panel id="uppergrid" width="100%" height="100%" includein="up" title="upper panel" />     <s:panel id="panel1" width="100%" title="panel">         <s:button label="switch mode" click="switchmode()" />     </s:panel>     <s:panel id="lowergrid" width="100%" height="100%" includein="down" title="lower panel" /> </s:vgroup> 

when rid of vgroup or vbox, , use absolute positions, transitions work fine:

<s:panel id="uppergrid" left="10" right="10" top="10" bottom="{panel1.height + 20}" includein="up" title="upper panel" /> <s:panel id="panel1" left="10" right="10" top.up="{uppergrid.height + 20}" top.down="10" title="panel">     <s:button label="switch mode" click="switchmode()" /> </s:panel> <s:panel id="lowergrid" left="10" right="10" top="{panel1.height + 20}" bottom="10" includein="down" title="lower panel" /> 

should use absolute positioning if want these kind of moving transitions or possible use these transitions in vgroup or vbox combined includein , excludefrom properties? , if so, how correct in example above?

the problem you're using container meant 'layout' it's children. try create own layout know when it's children in effect , not touch them until they're done, or use absolutely positioned layout container (like group) instead.