对可见=真/假的过渡效果如何？

Question

我已经构建了一个通过 SplitViewNavigator 构建的菜单。左侧视图是菜单，右侧是内容窗口。 左视图（meny）默认为 visible=false，但按下按钮后变为 visibe=true，而右视图（内容）调整为 20% 宽度，使菜单覆盖 80% 的屏幕。

如何在 visible=true/false 上应用过渡效果？ 我想让它看起来像左视图从屏幕左侧滑入，就像菜单中的滑动一样。由于可见，菜单现在才出现，但是可以让它滑动吗？或者任何其他类型的过渡效果？

我的申请代码：

<?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

从我的角度来看，更舒适的方式是使用状态：

定义最小化和最大化状态。 然后根据状态定义宽度（width.minimized="{0}" width.maximized="x%"）并在按下按钮时切换状态。然后，您可以轻松地为状态更改（火花转换的 fromState="" 和 toState="" 属性）应用转换（我使用了调整大小 - 与容器的两个部分并行执行）

也在处理类似的问题，但对面板做了相同的过程，编写了我自己的 splitviewnav，它运行得很好。

最好的问候

Answer 2

要在过渡中使用淡入淡出，请将 visible 设置为 true，alpha 设置为 0，然后使用任何类型的补间库将 alpha 从 0 补间到所需的值。