3 Replies Latest reply on Jun 18, 2010 11:25 AM by VRPDeveloper

    List Transitions

    demkalkov

      I've got a List that has 3 states with different layouts.

      1st - Horizontal

      2nd - Vertical

      3rd - Horizontal

       

      All of the states have its own ItemRenderer with its own size and content.

      How can I apply transitions to list, so that items moved smoothly?

        • 1. Re: List Transitions
          VRPDeveloper Level 3

          You can use transitions in this way

           

           

          <mx:transitions>
                  <!-- A transition for changing from any state to any state. -->
                  <mx:Transition id="myTransition" fromState="horizontal" toState="vertical">
                      <!-- Define a effect as the top-level effect.-->
                    
                  </mx:Transition>
              </mx:transitions>

           

           

          and so ... again use from vertical to horizontal....

           

          Hope it will help you...

          • 2. Re: List Transitions
            demkalkov Level 1

            <s:states>
                    <s:State name="List"/>
                    <s:State name="Tile"/>
                    <s:State name="Details"/>
                </s:states>

             

            <s:List id="ProgramsList"  width="100%" height="100%" dataProvider="{dataSource2}"
                        borderVisible="false"
                        itemRenderer="ItemRenderers.ProgramList"

                        itemRenderer.Details="ItemRenderers.ProgramDetails"
                        itemRenderer.Tile="ItemRenderers.ProgramTile"
                        changing="setCurrentState('Details')"           
                        x="5" y="10"

                        useVirtualLayout="false">
                       
                        <s:layout>
                            <s:VerticalLayout/>
                        </s:layout>
                        <s:layout.Tile>
                            <s:TileLayout horizontalGap="10"/>           
                        </s:layout.Tile>
                        <s:layout.Details>
                            <s:VerticalLayout verticalAlign="middle" horizontalAlign="center" />               
                        </s:layout.Details>   
                                   
                    </s:List> 

             

            <s:transitions>
                    <s:Transition id="SmoothMove">
                        <s:Parallel target="ProgramsList">               
                            <s:Resize duration="500"/>
                            <s:Move duration="500" />
                        </s:Parallel>                           
                    </s:Transition>

            </s:transitions>

             

            But it plays no transitions at all!

            • 3. Re: List Transitions
              VRPDeveloper Level 3

              Oh... You need to bind ProgramList with Transition in Target.... You have directly used <s:Parallel target="ProgramsList"> but it should be something like this

               

              <s:Parallel target="{ProgramsList}">

               

              Hope this will solve your problem