flex transition effects works on 2nd and after transition, but not on very first transition

i have a flex app that transitions between 2 states with the toggle of a button. my issue is that the effect of fading only seems to work on the 2nd transition and after. However, for my first transition... going from State1 to studyState... there is no fade effect whatsoever, in fact the components in state1 disappear completely (the footer fills the empty gap where the "body" use to be) and then the flex recreates the studyState (without any fade refilling the "body" with components only in studyState).

After this first transition however, going between studyState and State1 working COMPLETELY fine.. why does this happen and how can i make it so that crossfade works STARTING FROM THE VERY FIRST TRANSITION? please help!

 <s:transitions>
 <s:Transition id="t1" autoReverse="true">
 <s:CrossFade
  target="{holder}" 
  duration="1500" />
 </s:Transition>
 </s:transitions>
 <开发者_高级运维s:states>
 <s:State name="State1" />
 <s:State name="studyState" />
 </s:states>

<s:VGroup id="globalGroup" includeIn="State1" width="100%">stuff</Vgroup>
<s:VGroup id="studyGroup" includeIn="studyState" width="100%">stuff</Vgroup>

What is wrong about the state transition? Can you provide a full code sample?

This code segment, basically, works as I would have expected:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

<s:transitions>
    <s:Transition id="t1" autoReverse="true">
        <s:CrossFade
            target="{this}" 
            duration="1500" />
    </s:Transition>
</s:transitions>
<s:states>
    <s:State name="State1" />
    <s:State name="studyState" />
</s:states>

<s:VGroup id="globalGroup" includeIn="State1" width="100%">
    <s:Button label="State1 to studyState" click="this.currentState = 'studyState'" />
</s:VGroup>
<s:VGroup id="studyGroup" includeIn="studyState" width="100%">
    <s:Button label="studyState to State1" click="this.currentState = 'State1'"  />
</s:VGroup>


</s:Application>