Problem with Itemrenderer & Transition in mobile project

Question

Hallo,
i made an itemrenderer to display my stuff properly in a list. when the user selects a listitem a transition is played. the problem is, when the user scrolls the list the transition for the selected item is played again.
i seems to me, that the state of the selected item is changed when the user scrolls. it jumps to normal and goes instantly back to selected and this starts my transition again.
<s:states>
<s:State name="normal" />
<s:State name="selected" />
</s:states>
<s:transitions>
<s:Transition fromState="normal" toState="selected">
<s:Sequence duration="800" >
<s:Parallel>
<s:Resize target="{this}" />
<s:Fade startDelay="500" target="{test2}" />         
<s:Fade startDelay="500" target="{test3}" />              
<s:Fade startDelay="500" target="{test4}" />              
<s:Fade startDelay="500" target="{test5}" />              
<s:Fade startDelay="500" target="{test6}" />
</s:Parallel>
</s:Sequence>
</s:Transition>
</s:transitions>
This only occours when i scroll the list via touch on the device or via mouse-drag in the emulator. if i use the mousewheel to scroll in the emulator everything is fine. So am i doing something wrong or what can i do to stop the animation from being played again during scrolling?

Answer 1

Thanks for your help!
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                           xmlns:s="library://ns.adobe.com/flex/spark"
                              xmlns:fxg="fxgAssets.*"
                              xmlns:components="components.*"
                              >
<!-- States ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
     <s:states>
          <s:State name="normal" />
          <s:State name="selected" />
     </s:states>
<!-- Script ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
     <fx:Script>
          <![CDATA[
               // imports ------------------------------------
               import mx.events.FlexEvent;
               // event handlers -------------------------------------------
               protected function editField(event:MouseEvent):void
               protected function deleteField(event:MouseEvent):void
               protected function initializeButton(s1:String,s2:String,event:FlexEvent):void
                    import fxgAssets.*;
                    editIcon;
                    editIcon2;
                    deleteIcon2;
                    deleteIcon;
                    var cls:Class=getDefinitionByName(s1) as Class;
                    event.target.img1=new cls();
                    cls=getDefinitionByName(s2) as Class;
                    event.target.img2=new cls();               
          ]]>
     </fx:Script>
<!-- Declarations ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
     <fx:Declarations>
     </fx:Declarations>
<!-- Transitions ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
     <s:transitions>
               <s:Transition fromState="normal" toState="selected" >
                         <s:Sequence duration="800" >
                                   <s:Parallel>                                       
                                        <s:Resize target="{this}" />                                       
                                        <s:Fade startDelay="500" target="{editButton}" />         
                                        <s:Fade startDelay="500" target="{deleteButton}" />              
                                        <s:Fade startDelay="500" target="{product}" />              
                                        <s:Fade startDelay="500" target="{date}" />              
                                        <s:Fade startDelay="500" target="{test6}" />              
                                   </s:Parallel>    
                              </s:Sequence>                        
               </s:Transition>                   
     </s:transitions>
<!-- Graphics ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
     <s:Rect width="100%" height="1" bottom="0">
          <s:fill>
               <s:SolidColor color="0xe0e0e0" />
          </s:fill>
     </s:Rect>
     <s:Rect width="100%" height="100%" includeIn="selected">
          <s:fill>
               <s:LinearGradient rotation="90">
                    <s:GradientEntry color="#ffba00" ratio="0" alpha="1"/>
                    <s:GradientEntry color="#ffba00" ratio="1" alpha="1"/>
               </s:LinearGradient>
          </s:fill>
     </s:Rect>
     <s:Line id="test6" xFrom="15" xTo="225" yFrom="75" yTo="75" includeIn="selected" >
          <s:stroke>
               <s:SolidColorStroke color="white" weight="5"/>
          </s:stroke>
     </s:Line>
<!-- UI components ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
     <s:VGroup width="100%" >
          <s:HGroup width="100%" >
               <s:HGroup width="50%"  horizontalAlign="left">
                    <s:Label id="fieldName" text="Acker 1" width="100%" paddingTop="25"  paddingBottom="25" fontSize.selected="31" fontWeight.selected="bold"/>         
               </s:HGroup>
               <s:HGroup width="50%" horizontalAlign="right">
                    <components:MainMenuButton click="editField(event)"
                                                     skinClass="skins.MainMenuButtonSkin"
                                                     preinitialize="initializeButton('fxgAssets.editIcon2','fxgAssets.editIcon',event)"
                                                     id="editButton" scaleX="2.5" scaleY="2.5" includeIn="selected"
                                                     />
                    <components:MainMenuButton click="deleteField(event)"
                                                     skinClass="skins.MainMenuButtonSkin"
                                                     preinitialize="initializeButton('fxgAssets.deleteIcon2','fxgAssets.deleteIcon',event)"
                                                     id="deleteButton" scaleX="2.5" scaleY="2.5" includeIn="selected"
                                                     />
               </s:HGroup>
          </s:HGroup>
          <s:VGroup includeIn="selected" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"  >
               <s:Label id="product" text="Produkt: Mais" width="100%" paddingBottom="10"/>
               <s:Label id="date" text="Zeitraum: Di 01.01.2011 - Mi 02.02.2011" width="100%" paddingBottom="10"/>              
          </s:VGroup>
     </s:VGroup>
</s:ItemRenderer>