Flex 4狀態轉換在VGroup中移動效果

我想創建一個漂亮的狀態轉換，其中有2個容器（在下面的示例中，我使用過面板）。Flex 4狀態轉換在VGroup中移動效果

當狀態發生變化時，我想淡出上部面板，然後將下部面板移動到屏幕頂部，在下面我要淡入一個新的「下部」面板。

在下面的代碼中，淡入淡出效果很好，但面板不會移動到盒子的頂部，它只是在沒有過渡的情況下進入新位置。

此外，「反向」轉換完全不會發生。我試圖設置autoReverse爲true，並且我也試圖構建一個相反的轉換，兩者都沒有結果，沒有轉換。

當我將VGroup（在其中發生）替換爲VBox時，我得到一個稍微好一點的結果，轉換以一種方式工作。反向轉換依然不起作用。

<?xml version="1.0" encoding="utf-8"?>

<fx:Script> 
    <![CDATA[ 
     private function switchMode():void 
     { 
      if (currentState == "up") 
       currentState = "down"; 
      else 
       currentState = "up"; 
     } 
    ]]> 
</fx:Script> 

<s:states> 
    <s:State name="up" /> 
    <s:State name="down" /> 
</s:states> 

<s:transitions> 
    <s:Transition fromState="up" toState="down"> 
     <s:Sequence> 
      <s:Fade target="{upperGrid}" /> 
      <s:RemoveAction target="{upperGrid}" /> 
      <s:Move target="{panel1}" /> 
      <s:AddAction target="{lowerGrid}" /> 
      <s:Fade target="{lowerGrid}" /> 
     </s:Sequence> 
    </s:Transition> 

    <s:Transition fromState="down" toState="up"> 
     <s:Sequence> 
      <s:Fade target="{lowerGrid}" /> 
      <s:RemoveAction target="{lowerGrid}" /> 
      <s:Move target="{panel1}" /> 
      <s:AddAction target="{upperGrid}" /> 
      <s:Fade target="{upperGrid}" /> 
     </s:Sequence> 
    </s:Transition> 
</s:transitions> 

<s:VGroup width="100%" height="100%" top="10" left="10" right="10" bottom="10"> 
    <s:Panel id="upperGrid" width="100%" height="100%" includeIn="up" title="upper panel" /> 
    <s:Panel id="panel1" width="100%" title="Panel"> 
     <s:Button label="Switch mode" click="switchMode()" /> 
    </s:Panel> 
    <s:Panel id="lowerGrid" width="100%" height="100%" includeIn="down" title="lower panel" /> 
</s:VGroup>

當我擺脫在Vgroup或垂直框，並使用絕對位置，轉變工作的優良：

<s:Panel id="upperGrid" left="10" right="10" top="10" bottom="{panel1.height + 20}" includeIn="up" title="upper panel" /> 
<s:Panel id="panel1" left="10" right="10" top.up="{upperGrid.height + 20}" top.down="10" title="Panel"> 
    <s:Button label="Switch mode" click="switchMode()" /> 
</s:Panel> 
<s:Panel id="lowerGrid" left="10" right="10" top="{panel1.height + 20}" bottom="10" includeIn="down" title="lower panel" />

如果你總是使用絕對定位如果你想要這些類型的移動轉換，或者是否有可能在VGroup中使用這些轉換VBox結合includeIn和excludeFrom屬性？如果是這樣，我怎麼能糾正在上面的例子？

來源

2011-05-11 Bocaxica

問題是你正在使用一個容器來「佈置」它的孩子。您可以嘗試創建自己的佈局，以便知道它的子項當前是否有效，並在完成之前不要觸摸它們，或者使用絕對定位的佈局容器（如Group）。

來源

2011-05-11 15:37:26

Flex 4狀態轉換在VGroup中移動效果

回答

相關問題