usinganimations.aspx

AJAX 应用 实现页面的无刷新

            </asp:Panel>
        </div>
        <asp:LinkButton ID="Example3B" runat="server" OnClientClick="return false;" Style="visibility: hidden;">Reset</asp:LinkButton>
    </center>

    <ajaxToolkit:AnimationExtender ID="AnimationExample3A" runat="server" TargetControlID="Example3A">
        <Animations>
            <OnClick>
                <Sequence>
                    <Pulse Duration=".1" />
                    <Parallel Duration="1" Fps="20">
                        <FadeOut />
                        <Scale ScaleFactor="5" Unit="px" Center="true" ScaleFont="true" FontUnit="px" />
                    </Parallel>
                    <HideAction />
                    <StyleAction AnimationTarget="ctl00_SampleContent_Example3B" Attribute="visibility" Value="visible" />
                </Sequence>
            </OnClick>
        </Animations>
    </ajaxToolkit:AnimationExtender>
    <ajaxToolkit:AnimationExtender ID="AnimationExample3B" runat="Server" TargetControlID="Example3B">
        <Animations>
            <OnClick>
                <Sequence>
                    <StyleAction Attribute="visibility" Value="hidden" />
                    <ScriptAction Script="var e = $get('ctl00_SampleContent_Example3A'); var pos = CommonToolkitScripts.getLocation(e.parentNode); e.style.fontSize = '16px'; e.style.height = '100px'; e.style.width = '100px'; e.style.top = pos.y + 'px'; e.style.left = pos.x + 'px';" />
                    <OpacityAction AnimationTarget="ctl00_SampleContent_Example3A" Opacity="1" />
                    <StyleAction AnimationTarget="ctl00_SampleContent_Example3A" Attribute="display" Value=""/>
                </Sequence>
            </OnClick>
        </Animations>
    </ajaxToolkit:AnimationExtender>
    <p></p>
    <p>
        Most of the animations included in the framework are very simple and perform a single function.  When you combine them together
        using animations like <span class="codeReference">Sequence</span> and <span class="codeReference">Parallel</span> you can create very
        sophisticated effects.
    </p>
    <p></p>

    
    
    <div class="subheading">Actions</div>
    <p>
        The animation framework also includes a number of animation actions that perform an instantaneous operation.  They differ from regular
        animations which perform an operation in small steps over a period of time.  The actions are often useful in composite animations to assist
        in creating polished effects.  Examples include the <span class="codeReference">EnableAction</span> which allows you to set whether or not
        an element can be clicked, the <span class="codeReference">StyleAction</span> which allows you to set a style attribute on the target
        element, and the <span class="codeReference">HideAction</span> that hides the element.  If you wanted to prevent a
        <span class="codeReference">Button</span> on a page from being clicked twice, you could use the following animation:
        <pre>
&lt;Sequence&gt;
  &lt;EnableAction Enabled="false" /&gt;
  &lt;Parallel Duration=".2"&gt;
    &lt;Resize Height="0" Width="0" Unit="px" /&gt;
    &lt;FadeOut /&gt;
  &lt;/Parallel&gt;
  &lt;HideAction /&gt;
  &lt;ScriptAction Script="alert('Goodbye!');" /&gt;
&lt;/Sequence&gt;</pre>
        If hooked up to a <span class="codeReference">Button</span>, this would look like:
    </p>
    <center>
        <div style="height: 30px; width: 100px;">
            <asp:Button ID="Example4A" runat="server" style="width: 100px; height: 30px" Text="Click Me" OnClientClick="return false;" />
        </div>
        <asp:LinkButton ID="Example4B" runat="server" OnClientClick="return false;" Style="visibility: hidden;">Reset</asp:LinkButton>
    </center>
    <ajaxToolkit:AnimationExtender ID="AnimationExample4A" runat="server" TargetControlID="Example4A">
        <Animations>
            <OnClick>
                <Sequence>
                    <EnableAction Enabled="false" />
                    <Parallel Duration=".2">
                        <Resize Height="0" Width="0" Unit="px" />
                        <FadeOut />
                    </Parallel>
                    <HideAction />
                    <StyleAction AnimationTarget="ctl00_SampleContent_Example4B" Attribute="visibility" Value="visible" />
                    <ScriptAction Script="alert('Goodbye!');" />
                </Sequence>
            </OnClick>
        </Animations>
    </ajaxToolkit:AnimationExtender>
    <ajaxToolkit:AnimationExtender ID="AnimationExample4B" runat="server" TargetControlID="Example4B">
        <Animations>
            <OnClick>
                <Sequence>
                    <StyleAction Attribute="visibility" Value="hidden" />
                    <OpacityAction AnimationTarget="ctl00_SampleContent_Example4A" Opacity="1" />
                    <EnableAction AnimationTarget="ctl00_SampleContent_Example4A" Enabled="true" />
                    <StyleAction AnimationTarget="ctl00_SampleContent_Example4A" Attribute="width" Value="100px" />
                    <StyleAction AnimationTarget="ctl00_SampleContent_Example4A" Attribute="height" Value="30px" />
                    <StyleAction AnimationTarget="ctl00_SampleContent_Example4A" Attribute="display" Value="" />
                </Sequence>
            </OnClick>
        </Animations>
    </ajaxToolkit:AnimationExtender>
    
    <div class="subheading">Animation Targets</div>
    <p>
        The animations perform their various operations on a target element.  The default target element for an animation is
        the control it is extending (i.e. the control pointed to by <span class="codeReference">TargetControlID</span> on its
        <span class="codeReference">Extender</span> tag).  You can also specify alternate targets using the
        <span class="codeReference">AnimationTarget</span> property.  This is very useful when you want to wire up the
        <span class="codeReference">AnimationExtender</span> to one control, like a <span class="codeReference">Button</span>,
        but have the animation modify another control, like a <span class="codeReference">Panel</span>.  A child animation will
        have the same target as its parent animation unless another target was explicitly specified.  Here's an example of how we
        could have a button's <span class="codeReference">OnClick</span> event animate the background color of another control:
        <pre>
&lt;Sequence&gt;
  &lt;EnableAction Enabled="false" /&gt;
  &lt;Color AnimationTarget="MyContent"
    Duration="1"
    StartValue="#FF0000"
    EndValue="#666666"
    Property="style"
    PropertyKey="backgroundColor" /&gt;
  &lt;Color AnimationTarget="MyContent"
    Duration="1"
    StartValue="#FF0000"
    EndValue="#666666"
    Property="style"
    PropertyKey="backgroundColor" /&gt;
  &lt;EnableAction Enabled="true" /&gt;
&lt;/Sequence&gt;</pre>
        Clicking this button will demonstrate the animation:
    </p>
    <center>
        <asp:Button ID="Example5A" runat="server" style="width: 100px; height: 30px" Text="Click Me" OnClientClick="return false;" />
    </center>
    <ajaxToolkit:AnimationExtender ID="AnimationExample5A" runat="server" TargetControlID="Example5A">
        <Animations>
            <OnClick>
                <Sequence>
                    <EnableAction Enabled="false" />
                    <Color AnimationTarget="master_contentplaceholder"
                        Duration="1"
                        StartValue="#EFEFEF"
                        EndValue="#FF0000"
                        Property="style"
                        PropertyKey="backgroundColor" />
                    <Color AnimationTarget="master_contentplaceholder"
                        Duration="1"
                        StartValue="#FF0000"
                        EndValue="#EFEFEF"
                        Property="style"
                        PropertyKey="backgroundColor" />
                    <EnableAction Enabled="true" />
                </Sequence>
            </OnClick>
        </Animations>
    </ajaxToolkit:AnimationExtender>
    <div class="subheading">Conclusion</div>
    <p>
    The animation framework provides you with the ability to easily add interactivity to your web pages that's never before been available.  Beyond 
    specifying animations in markup, they're also easy to use in code so you can add professional looking transitions and visual
    effects to your Toolkit components and controls. 
    </p>    
    
    
    </div>
</asp:Content>