How to implement effects in Flex on components creation or removal

Question

I have multiple MXML custom components that I add on the fly (using a repeater) that is binded to an ArrayCollection. So everytime I add/remove item from the ArrayColleciton new items show/disappear from the screen.

Is there a straightforward way to make item fade in when they get created and fade out when they are removed? I thought of using states and state transition effects but that will make things a bit complicated at different part of my application for those components to manage the states.

Answer 1

You need "Data effects" not "State Transitions". Creating the effect is the same, but the way you set it up is slightly different. Take a look at this list:

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/core/UIComponent.html?filter_flex=4.1&filter_flashplayer=10.1&filter_air=2#top

Specifically, you'll probably want to use addedEffect when something is added and removedEffect when something is removed. You may also want to investigate hideEffect and showEffect .

So, instead of creating a transitions array, you'll set the effect like it were a style in ActionScript. In MXML, set it like it were a property on the component.

And I strongly recommend not using repeaters if there is any chance your data will scroll off the screen. A repeater will renderer every element in your dataProvider. A list, will only render those elements that display on screen. Lists are much more effecient in this regards.