Flex - Play resize effect on parent before adding child to it

I have a panel with a button in it. Clicking on the button will direct the panel to state "State2" adding another two buttons into the panel. During the state change, I want the panel to resize first and then show the newly added two buttons, so I applied transitions onto the state change.

My question is:

If I put the two buttons within a HBox directly under the addChild tag, it works fine. However, if I create a new component with the same code (HBox with two buttons in it) and then add the new component to the panel (Comp in the code commented), it won't show the resize effect.

Could someone tell me how to fix this? Thanks in advance.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">

    &l开发者_如何学Ct;mx:Script>
        <![CDATA[
            protected function button1_clickHandler(event:MouseEvent):void
            {
                currentState="State2";
            }
        ]]>
    </mx:Script>

    <mx:transitions>
        <mx:Transition>
            <mx:Sequence targets="{[comp,panel1]}">
                <mx:Resize target="{panel1}" />
                <mx:AddChildAction />
            </mx:Sequence>
        </mx:Transition>
    </mx:transitions>

    <mx:states>
        <mx:State name="State2">
            <mx:AddChild relativeTo="{panel1}" position="lastChild">
                <mx:HBox id="comp">
                    <mx:Button label="B" />
                    <mx:Button label="C" />
                </mx:HBox>
                <!--<local:Comp id="comp" />-->
            </mx:AddChild>

        </mx:State>
    </mx:states>

    <mx:Panel layout="horizontal" borderThickness="1" borderStyle="solid" id="panel1" title="AB">
        <mx:Button label="A" click="button1_clickHandler(event)"/>
    </mx:Panel>
</mx:Application>

---

I guess <mx:AddChild> tag can handle only one component at a time.

You will get your sweet resize effect if you separate your custom component to another <mx:AddChild> tag, similar to the code below:

<mx:AddChild relativeTo="{panel1}" position="lastChild">
      <mx:HBox id="comp">
           <mx:Button label="B" />
           <mx:Button label="C" />
           <!-- Don't put your custom component here. --> 
      </mx:HBox>
</mx:AddChild> 
<!-- Use separated AddChild. Still add to same relativeTo object  -->           
<mx:AddChild relativeTo="{panel1}" position="lastChild">
     <local:Comp id="comp2" />
</mx:AddChild>

I hope you got what you want.