Flex 4 transition: Glitch with simultaneous move and resize

I'm building a user interface and I have two panels which I need to move and resize. They have to look as a single panel. It works fine when I move or resize only one. But when one moves and the other resizes at the same time... an intermittent line appears between the two.

How can I avoid this?

Here is a working example of the problem:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx" 
                       xmlns:components="components.*"
                       frameRate="30" height="400" width="200" >
  <s:states>
    <s:State name="minimized" />
    <s:State name="maximized" />
  </s:states>

  <s:transitions>
    <s:Transition>
      <s:Parallel duration="4000" targets="{[one, two]}">
        <s:Move target="{two}" />
        <s:Resize target="{one}" />
      </s:Parallel>
    </s:Transition>
  </s:transitions>

  <s:Group id="one"
           width="200"
           height.minimized="20" height.maximized="200" 
           y="0">
    <s:Rect width="100%" height="100%">
      <s:fill>
        <s:SolidColor color="black" />
      </s:fill>
    </s:Rect>
  </s:Group>

  <s:Group id="two" 
           width="200"
           height="200"
           y.minimized="20" y.maximized="200">
    <s:Rect width="100%" height="100%">
      <s:fill>
        <s:SolidColor color="black" />
      </s:fill>
    </s:Rect>
  </s:Group>

  <s:Button click="currentState=(currentState=='minimized'? 'maximized' : 'minimized')" label="{currentState}" />

</s:WindowedApplication>

Thanks in advance!

Updated: Here's a version with VGroup:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx=开发者_如何学Python"library://ns.adobe.com/flex/mx" 
                       xmlns:components="components.*"
                       frameRate="30" height="400" width="400" >
  <s:states>
    <s:State name="minimized" />
    <s:State name="maximized" />
  </s:states>

  <s:transitions>
    <s:Transition>
      <s:Parallel duration="4000" targets="{[one, two, three]}">
        <s:Move target="{two}" />
        <s:Resize target="{one, three}" />
      </s:Parallel>
    </s:Transition>
  </s:transitions>

  <s:Group id="one"
           width="200"
           height.minimized="20" height.maximized="200" 
           y="0">
    <s:Rect width="100%" height="100%">
      <s:fill>
        <s:SolidColor color="black" />
      </s:fill>
    </s:Rect>
  </s:Group>
  <s:Group id="two" 
           width="200"
           height="200"
           y.minimized="20" y.maximized="200">
    <s:Rect width="100%" height="100%">
      <s:fill>
        <s:SolidColor color="black" />
      </s:fill>
    </s:Rect>
  </s:Group>


  <s:VGroup gap="0" left="200">   
    <s:Group id="three"
             width="200"
             height.minimized="20" height.maximized="200" 
             y="0">
      <s:Rect width="100%" height="100%">
        <s:fill>
          <s:SolidColor color="black" />
        </s:fill>
      </s:Rect>
    </s:Group>
    <s:Group id="four" 
             width="200"
             height="200">
      <s:Rect width="100%" height="100%">
        <s:fill>
          <s:SolidColor color="black" />
        </s:fill>
      </s:Rect>
    </s:Group>
  </s:VGroup>

  <s:Button click="currentState=(currentState=='minimized'? 'maximized' : 'minimized')" label="{currentState}" />

</s:WindowedApplication>

Place both in the same VGroup and change the height of the first panel only.