[flexcoders] FadeIn Effect not working with custom item renderers in List

[tonyjobrien]

I'm trying to get the FadeIn effect to work on my List control, but
I'm having no luck. The custom renderer stays white for the
FadeInDuration and then appears instantly. If I switch back to using
the default renderer, all is well. Also, if I have both a list with a
custom renderer and the default at the same time, they both exhibit
the same behaviour as the custom renderer. Here is a simple Flex app
that shows the issue (comment out the lists as required).

FYI, I'm using Flex 3 on Windows XP with Firefox 3.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
layout="absolute" creationComplete="handleCreationComplete();">

        <mx:Script>
                <![CDATA[
                        import mx.collections.ArrayCollection;
                        
                        [Bindable]
                        public var listArray:ArrayCollection = new 
ArrayCollection();
                        
                        public function handleCreationComplete():void
                        {
                                for (var i:int = 1; i <= 10; i++)
                                {
                                        trace("Adding Item " + i);
                                        listArray.addItem({label: "List Item " 
+ i});
                                }
                        }
                        
                ]]>
        </mx:Script>

        <mx:HBox>
                <mx:List variableRowHeight="true" dataProvider="{listArray}">
                        <mx:itemsChangeEffect>
                                <mx:DefaultListEffect
                                        color="#0000FF"
                                        fadeInDuration="4000"
                                        fadeOutDuration="4000"
                                        />
                        </mx:itemsChangeEffect>
                </mx:List>
<!--
                <mx:List variableRowHeight="true" dataProvider="{listArray}">
                        <mx:itemsChangeEffect>
                                <mx:DefaultListEffect
                                        color="#0000FF"
                                        fadeInDuration="4000"
                                        fadeOutDuration="4000"
                                        />
                        </mx:itemsChangeEffect>
                        <mx:itemRenderer>
                                <mx:Component>
                                        <mx:Canvas>
                                                <mx:Label text="{data.label}"/>
                                        </mx:Canvas>
                                </mx:Component>
                        </mx:itemRenderer>
                </mx:List>
-->
        </mx:HBox>

</mx:Application>