flex adding elements with animations to a Vgroup

Question

The goal is to add some smooth animations (fading or moving) when I add new elements to a Vgroup container

I tried that :

<fx:Declarations>
<s:Move id="addedEffect" duration="800" xTo="100"  />
</fx:Declarations>
<s:VGroup id="answersGroup" width="100%" height="100%" addedEffect="{addedEffect}" >
protected function button1_clickHandler(event:MouseEvent):void  {               
    for (var i:int = 0;i<3;i++) {
        var good:GoodAnswer = new GoodAnswer();
        answersGroup.addElement(good);  
    }           
}

Any idea how to acheieve any sommth adding effect on a vgroup ?

Pete TNT Pete TNT · Accepted Answer · 2013-07-03T12:51:05

You need to add the addedEffect to the GoodAnswer-item, not the VGroup.

Assuming that GoodAnswer extends a class that has the "addedEffect" style, example of Fade from 0 to 1 with duration of 2 seconds

<fx:Declarations>
<s:Fade id="fade" duration="2000" alphaFrom="0" alphaTo="1"  />
</fx:Declarations>
<s:VGroup id="answersGroup" width="100%" height="100%">


protected function button1_clickHandler(event:MouseEvent):void  {               
    for (var i:int = 0;i<3;i++) {
       var good:GoodAnswer = new GoodAnswer();
       good.setStyle("addedEffect", fade);
       answersGroup.addElement(good);  
    }           
}

flex adding elements with animations to a Vgroup

1 Answers