S:move effect returns original X value

Question

I'm working on an Item Render list which I want to play a few animations when I hover over the links. The move effect is supposed to move the label over, which is does, but after it plays the animation the label resumes its original position at the beginning. My scale effect doesn't do this, and it's making the animation a little pointless.
I think I could fix this in AS, but I was hoping for a much simpler solution. Is there one? Here's the code:
<s:List x="10" y="62"
                id="newChaps"
                dataProvider="{lastChapsData}"
                width="258"
                height="293"
                contentBackgroundAlpha="0.0"
                height.close="272"
                >
            <s:itemRenderer>
                <fx:Component>
                    <s:ItemRenderer>
                        <s:states>
                            <s:State name="normal"/>
                            <s:State name="hovered"/>
                        </s:states>
                        <s:transitions>
                            <s:Transition fromState="normal" toState="hovered">
                                <s:Parallel>
                                    <s:Move target="{titles}" duration="400" xTo="10"/>
                                    <s:Scale scaleXFrom="1" scaleXTo="1.2"
                                             scaleYFrom="1" scaleYTo="1.2"
                                             target="{titles}"/>
                                </s:Parallel>
                            </s:Transition>
                            <s:Transition fromState="hovered" toState="normal">
                                <s:Parallel>
                                    <s:Move xFrom="10" xTo="0" target="{titles}"/>
                                    <s:Scale scaleXFrom="1.2" scaleXTo="1"
                                             scaleYFrom="1.2" scaleYTo="1"
                                             target="{titles}"/>
                                </s:Parallel>
                            </s:Transition>
                        </s:transitions>
                        <s:Label text="-{data.title}"
                                 id="titles"
                                 fontSize="20"
                                 fontWeight="bold"
                                 top="5"
                                 bottom="5"
                                 />
                    </s:ItemRenderer>
                </fx:Component>
            </s:itemRenderer>
        </s:List>
Thank you for the help.

Answer 1

When you use effects in a transition you shouldn't define properties like xTo/yTo etc. on them directly, but instead define all of those values in the states of the target and let the transition figure out what needs to change.
So your transitions should look more like:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark">
    <s:List width="258" height="293">
        <s:dataProvider>
            <s:ArrayList>
                <fx:Array>
                    [0,1,2,3,4,5,6]
                </fx:Array>
            </s:ArrayList>
        </s:dataProvider>
        <s:itemRenderer>
            <fx:Component>
                <s:ItemRenderer>
                    <s:states>
                        <s:State name="normal"/>
                        <s:State name="hovered"/>
                    </s:states>
                    <s:transitions>
                        <s:Transition fromState="normal" toState="hovered">
                            <s:Parallel>
                                <s:Move target="{titles}" duration="400" />
                                <s:Scale target="{titles}"/>
                            </s:Parallel>
                        </s:Transition>
                        <s:Transition fromState="hovered" toState="normal">
                            <s:Parallel>
                                <s:Move target="{titles}"/>
                                <s:Scale target="{titles}"/>
                            </s:Parallel>
                        </s:Transition>
                    </s:transitions>
                    <s:Label text="-1"
                             id="titles"
                             x.hovered="10"
                             scaleX.hovered="1.2"
                             scaleY.hovered="1.2"
                             fontSize="20"
                             fontWeight="bold"
                             top="5"
                             bottom="5"
                             />
                </s:ItemRenderer>
            </fx:Component>
        </s:itemRenderer>
    </s:List>
</s:Application>