flex4 add group with transition effect - actionscript-3

Question

How can i add a Group (with unknown size) to SkinnableContainer with a transformation effect?
Example
First, resize the SkinnableContainer smoothly to its final size and then fade in the Group.
Problem hereby
The Group-size is determined by adding it to the SkinnableContainer. Doing this, the SkinnableContainer gets the final size and the Group is shown, without playing the transition effect.
All examples i found are MXML- and State-based. But i need an Actionscript-only solution here.

Answer 1

<fx:Declarations>
<s:Parallel id="showEff">
<s:Rotate3D angleYFrom="-90" angleYTo="0" duration="7000"/>
<s:Fade alphaFrom="0.0" alphaTo="1.0" duration="7000" />
<mx1:WipeRight duration="9000"/>
</s:Parallel>
<s:Parallel id="hideEff">
<s:Rotate3D angleYFrom="0" angleYTo="-90" duration="4000" />
<s:Fade alphaFrom="1.0" alphaTo="0.0" duration="7000"/>
<mx1:WipeRight duration="5000"/>
</s:Parallel>
</fx:Declarations>
<s:Button id="btn"
label="Toggle Panel visibility"
click="skinnableContainerPanel.visible = !skinnableContainerPanel.visible;" />
<s:Panel id="skinnableContainerPanel" title="Using SkinnableContainer"
width="500" height="300" showEffect="{showEff}"
hideEffect="{hideEff}" >
<s:layout>
<s:VerticalLayout gap="10" verticalAlign="middle"
horizontalAlign="center"/>
</s:layout>
<s:SkinnableContainer
skinClass="com.SkinnableContainerSkin"
width="50%" height="50%" horizontalCenter="0"
verticalCenter="0">
<s:HGroup horizontalCenter="0" verticalCenter="0" >
<s:BorderContainer width="50" height="50"
borderWeight="2" color="0x323232" />
<s:BorderContainer width="50" height="50"
borderWeight="2" color="0x323232" />
<s:BorderContainer width="50" height="50"
borderWeight="2" color="0x323232" />
</s:HGroup>
</s:SkinnableContainer>
</s:Panel>