title: In Flex 4, state transition doesn't resize in both directions
body: <p>I have two states. When I switch from OFF to A, it resizes correctly, but when I switch from A back to OFF it happens without the smooth resize transition. What am I doing wrong?</p>
  
  <p>Here's my code:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx"&gt;
  
    &lt;fx:Script&gt;
      &lt;![CDATA[
        protected function butA_changeHandler(e:Event):void
        {       
          if ((e.target as ToggleButton).selected) {
            this.currentState="A";
          } else {
            this.currentState="off";
          }
        }
      ]]&gt;
    &lt;/fx:Script&gt;
  
    &lt;s:states&gt;
      &lt;s:State name="off" /&gt;
      &lt;s:State name="A" /&gt;
    &lt;/s:states&gt;
  
    &lt;s:transitions&gt;
      &lt;s:Transition fromState="off" toState="A" autoReverse="true"&gt;
        &lt;s:Parallel duration="300"&gt;
          &lt;s:Resize target="{content}" heightTo="{cA.height}" /&gt;
          &lt;s:Fade targets="{cA}"/&gt;
        &lt;/s:Parallel&gt;
      &lt;/s:Transition&gt;
      &lt;s:Transition fromState="A" toState="off" autoReverse="true"&gt;
        &lt;s:Parallel duration="300"&gt;
          &lt;s:Resize target="{content}" heightTo="0" /&gt;
          &lt;s:Fade targets="{cA}"/&gt;
        &lt;/s:Parallel&gt;
      &lt;/s:Transition&gt;
    &lt;/s:transitions&gt;
  
    &lt;s:Group id="content" excludeFrom="off" width="100%" clipAndEnableScrolling="true"&gt;   
      &lt;s:Group id="cA" includeIn="A" width="100%"&gt;&lt;s:Label fontSize="70" text="A"/&gt;&lt;/s:Group&gt;
    &lt;/s:Group&gt;
  
    &lt;s:HGroup&gt;
      &lt;s:ToggleButton id="butA" label="A" change="butA_changeHandler(event)"/&gt;
    &lt;/s:HGroup&gt;
  
  &lt;/s:VGroup&gt;
  </code></pre>
  
  <p>Thanks in advance,
  Nuno</p>