ASP.NET Tutorial/Ajax/Animation

Материал из .Net Framework эксперт
Перейти к: навигация, поиск

Show Animation Composite

<%@ Page Language="C#" %>
<%@ Register TagPrefix="ajax" Namespace="AjaxControlToolkit"
 Assembly="AjaxControlToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Show Animation Composite</title>
    <style type="text/css">
    #pnl
    {
        display:none;
        position:absolute;
        width:1px;
        height:1px;
        left:200px;
        top:200px;
        padding:3px;
        background-color: #eeeeee;
        border:solid 1px black;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:Button
            id="btn"
            Text="Play"
            OnClientClick="return false;"
            Runat="server" />
        <asp:Panel
            ID="pnl"
            runat="server">
            <h3>I feel so animated!</h3>
        </asp:Panel>
        <ajax:AnimationExtender
            ID="ae1"
            TargetControlID="btn"
            runat="server">
            <Animations>
            <OnClick>
              <Sequence AnimationTarget="pnl">
                <EnableAction
                    AnimationTarget="btn"
                    Enabled="false" />
                <StyleAction
                    Attribute="display"
                    Value="block"/>
                <Parallel>
                <FadeIn
                    Duration="1"
                    Fps="20" />
                <Scale
                    Duration="1"
                    Fps="20"
                    ScaleFactor="30.0"
                    Center="true" />
                </Parallel>
              </Sequence>
            </OnClick>
            </Animations>
        </ajax:AnimationExtender>
    </div>
    </form>
</body>
</html>


Using the Animation Control

<%@ Page Language="C#" %>
<%@ Register TagPrefix="ajax" Namespace="AjaxControlToolkit"
 Assembly="AjaxControlToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Show Animation Simple</title>
    <style type="text/css">
    #pnl
    {
        position:absolute;
        padding:3px;
        background-color: #eeeeee;
        border:solid 1px black;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:Panel
            ID="pnl"
            runat="server">
            <h3>I feel so animated!</h3>
        </asp:Panel>
        <ajax:AnimationExtender
            ID="ae1"
            TargetControlID="pnl"
            runat="server">
            <Animations>
            <OnLoad>
                <Sequence>
                <Move
                    Horizontal="300"
                    Vertical="300"
                    Duration="1"
                    Fps="20" />
                <FadeOut
                    Duration="1"
                    Fps="20" />
                </Sequence>
            </OnLoad>
            </Animations>
        </ajax:AnimationExtender>
    </div>
    </form>
</body>
</html>
Источник — «http://nfex.ru/index.php?title=ASP.NET_Tutorial/Ajax/Animation&oldid=3012»