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

Question

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="*">

    <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>

Answer 1

我猜<mx:AddChild>标签一次只能处理一个组件。

如果您将自定义组件与另一个标签分开，您将获得甜蜜的调整大小效果<mx:AddChild>，类似于以下代码：

<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>

我希望你得到你想要的。