フレックス：トランジションされた状態の変更後にコンテンツが正しくレンダリングされない

Question

2つの状態のコンポーネントがあり、2つの異なるオブジェクトに2つの移動の影響が適用される状態を切り替えるためのトランジションが追加されました。しかし、これはうまくいきますが、最初の状態から2番目の状態への移行が完了した後、2番目の状態は正しく表示されません。これは、表示されていないTextInputコントロールと、ときにしか表示されず、クリックすると消滅するカスタムスキンのButtonを含んでいます。 2番目の状態をロードした後にinvalidateDisplayList（）とvalidateNow（）を呼び出そうとしましたが、何もしませんでした。私はまた、cornerRadiusプロパティを設定したVBoxを持っています。不思議なことに、これはもう適用されないようで、コーナーは四角形で、トランジションを追加する前に正しく表示されています。

ありがとうございました！ここで

は私の状態とその遷移のためのコードです：

<!-- different states of this component --> 
<mx:states> 
    <s:State name="useForFree" 
      enterState="renderState()"/> 
    <s:State name="enterLicence" 
      enterState="renderState()"/> 
</mx:states> 


<!-- transitions between different states --> 
<mx:transitions> 

    <!-- transition from useForFree to enterLicence state --> 
    <s:Transition id="toEnterLicence" 
        fromState="useForFree" 
        toState="enterLicence"> 
     <s:Parallel id="p1" 
        targets="{[freeBtn, _enterLicenceMask]}">    
      <s:Move yFrom="250" 
        yTo="0" 
        duration="500" 
        targets="{[freeBtn]}"/> 
      <s:Move yFrom="289" 
        yTo="39" 
        duration="500" 
        targets="{[_enterLicenceMask]}"/> 
     </s:Parallel>  
    </s:Transition> 

    <!-- transition from enterLicence to useForFree state --> 
    <s:Transition id="toUseForFree" 
        fromState="enterLicence" 
        toState="useForFree"> 
     <s:Parallel id="p2" 
        targets="{[enterLicenceBtn, _useForFreeMask]}">    
      <s:Move yFrom="0" 
        yTo="240" 
        duration="500" 
        targets="{[enterLicenceBtn]}"/> 
      <s:Move yFrom="-250" 
        yTo="0" 
        duration="500" 
        targets="{[_useForFreeMask]}"/> 
     </s:Parallel>  
    </s:Transition> 
</mx:transitions> 

、ここでは私のレイアウトのためのコードです：

マスクとして設定された変数がUIComponentインスタンスです

<mx:Canvas id="freeStateCanvas" 
      width="100%"> 

    <mx:VBox width="100%" 
      horizontalAlign="center" 
      top="0" 
      mask="{_useForFreeMask}"> 

     <mx:VBox id="freeBox" 
       includeIn="useForFree"> 
      <s:Label text="some text"/> 
      <s:Spacer height="20"/> 
      <s:Image source="image path"/> 
      <s:Spacer height="20"/> 
      <mx:Button id="connectBtn"/> 
      <s:Spacer height="10"/> 
      <mx:HBox > 
       <s:Label text="some text"/>/> 
      </mx:HBox> 
     </mx:VBox> 

     <s:Label text="some text" 
       includeIn="useForFree"/>   
    </mx:VBox> 

     <mx:Button id="enterLicenceBtn" 
        includeIn="useForFree"/> 

</mx:Canvas> 

<!-- enter licence state --> 

<mx:Canvas id="enterLicenceStateCanvas" 
      width="100%"> 

     <mx:VBox id="enterLicenceBox"      
       mask="{_enterLicenceMask}" 
       includeIn="enterLicence"> 

      <s:Label text="some text"/> 
      <s:Spacer height="20"/> 
      <s:TextInput id="licenceInput" 
         width="200" 
         height="30"/> 
      <s:Spacer height="20"/> 
      <mx:Button id="registerBtn"/> 
      <s:Spacer height="10"/> 
      <mx:HBox> 
       <s:Label text="some text"/> 
       <s:Label text="some more text"/> 
      </mx:HBox> 
     </mx:VBox> 

     <mx:Button id="freeBtn" 
        includeIn="enterLicence"/> 

</mx:Canvas> 

ここでは、グラフィックスプロパティを使用して長方形を描画しています。

Answer 1

問題が何であるかわかりましたが、シャンフーサインを助けてくれてありがとう。

私のコードでは、「フリーボックス」と「enterLicenceBox」という2つのVBoxコンテナがあり、実際には白い背景と丸みを帯びたコーナーがあり、DropShadowFilterが適用されています。彼らは無関係だと感じたので、それは間違いだった）。

このDropShadowFilterが私の全問題の原因であり、それを削除すると、トランジションが正常に機能し、すべてのコンテンツが正しくレンダリングされました。私はこれがちょっと変わったFlexのバグだと思っています。回避策が見つからなかったので、すぐに画像をボックスの背景として使用しました。