Move or Slide Transition Problem

Question

I have a Panel that contains 3 components, though only one should display at a time (state).
What I would like to happen is when the state changes, the current component that displays inside the Panel slides off to the left to disappear as the new component slides into view.
The components slide, however, the outgoing component continues to slide past the left edge of the panel onto the containing module. The incoming component slides fine, appearing at the panel's right edge and sliding across - unlike the first component, it doesn't appear in the containing module, it only appears within the panel. So I'm not sure why the outgoing component doesn't behave as I'd like.
The MXMLI have:
<?xml version="1.0" encoding="utf-8"?>
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
                      xmlns:s="library://ns.adobe.com/flex/spark"
                      xmlns:mx="library://ns.adobe.com/flex/mx"
   xmlns:views="mods.av.views.*"
   xmlns:comps="comps.*"
                      width="800" height="500" creationComplete="init()">
          <s:layout>
                    <s:VerticalLayout/>
          </s:layout>
          <fx:Script>
                    <![CDATA[
                              import mods.av.events.ApplicationSelectionEvent;
                              import mods.av.events.ServerSelectionEvent;
                              protected function init():void
                                        currentState = "ApplicationsViewState";
                                        this.addEventListener("app_selected", applicationSelectionEventHandler);
                                        this.addEventListener("server_selected", serverSelectionEventHandler);
                              private function applicationSelectionEventHandler(event:ApplicationSelectionEvent):void {
                                        currentState = "ServersViewState";
                              private function serverSelectionEventHandler(event:ServerSelectionEvent):void {
                                        currentState = "ServerDetailViewState";
                    ]]>
          </fx:Script>
          <s:states>
                    <s:State name="ApplicationsViewState" />
                    <s:State name="ServersViewState" />
                    <s:State name="ServerDetailViewState" />
          </s:states>
          <s:transitions>
                    <s:Transition fromState="ApplicationsViewState" toState="ServersViewState">
                              <s:Sequence>
                                        <s:Move target="{applicationsView}" xTo="-800" duration="1500" />
                                        <s:RemoveAction target="{applicationsView}" />
                                        <s:AddAction target="{serversView}" />
                                        <s:Move target="{serversView}" xTo="0" xFrom="800" duration="1500" />
                              </s:Sequence>
                    </s:Transition>
          </s:transitions>
          <comps:PanelBase id="viewerPanel" title="Viewer" width="800" height="100%">
                    <views:ApplicationsView id="applicationsView" includeIn="ApplicationsViewState" width="100%" height="100%" />
                    <views:ServersView id="serversView" includeIn="ServersViewState" width="100%" height="100%" />
                    <views:ServerDetailView id="serverDetailView" includeIn="ServerDetailViewState" width="100%" height="100%" />
          </comps:PanelBase>
</s:Module>

Answer 1

Shot in the dark here but you're hardcoding the movement to 800 (or -800 on the xTo). Perhaps you should code it to consider the actual size of the available space just incase 800 is wrong.