How transition effect on visible=true/false?

Question

I've built a menu that is built via a SplitViewNavigator. The left view is the menu while the right one is the content window. The left view (meny) is visible=false by default but upon button press becomes visibe=true while the right view (content) resizes to 20% width, making the menu cover 80% of the screen.

How do I apply a transition effect on visible=true/false? I would love to make it look like the left view slides in from the left side of the screen, like a slide in menu. The menu just turns up now due to the visible, but is it possible to make it slide? Or any other typ of transition effect?

My code for the applicataion:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160" xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Declarations>



    </fx:Declarations>

    <fx:Style source="style.css">
    </fx:Style>

    <fx:Script>
        <![CDATA[
            protected function button1_clickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub

            if (meny.visible){
                meny.visible = false;
                content.width *= 5;
                hannah.visible = true;


            } else {
                meny.visible = true;
                content.width *= 0.2;
                hannah.visible = false;

            }
            }
        ]]>
    </fx:Script>


    <s:SplitViewNavigator backgroundColor="#7b7b7b"  width="100%" height="100%">

        <s:ViewNavigator visible="false" id="meny" width="100%" height="100%" firstView="views.Meny">
            <s:navigationContent>
                <s:Button label="Meny" click="button1_clickHandler(event)"/>
            </s:navigationContent>
            </s:ViewNavigator>
        <s:ViewNavigator title="Content" id="content" width="100%" height="100%" firstView="views.Content">
            <s:navigationContent>
                <s:Button id="hannah" label="Meny" click="button1_clickHandler(event)"/>
            </s:navigationContent>
        </s:ViewNavigator>

    </s:SplitViewNavigator>




</s:Application>

Answer 1

To use fade in transition, set visible to true, alpha to 0 then use any kind of tweening library to tween alpha from 0 to desired value.