zoukankan      html  css  js  c++  java
  • UpdatePanelAnimation

    UpdatePanelAnimation控件主要应用于UpdatePanel的局部刷新效果,它提供一个动画效果。

    属性列表:
    TargetControlID:要应用特效的UpdatePanel控件ID
    OnUpdeting:更新时应用的特效(何任控件的回调都会导致此事件的触发)
    OnUpdated:更新后的特效(如果要使用任何控件回调完成后都触发此事件则需要对UpdatePane的OnUpdated属性为Always)

    实例解析一、实现局部更新渐变效果

    1.UI界面
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        </div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Calendar ID="Calendar1" runat="server" Height="219px" OnSelectionChanged="Calendar1_SelectionChanged"
                        Width="350px"></asp:Calendar>
                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                </ContentTemplate>
            </asp:UpdatePanel>
            <cc1:updatepanelanimationextender id="UpdatePanelAnimationExtender1" runat="server" targetcontrolid="UpdatePanel1">
            <Animations>
              <OnUpdated>
                 <Sequence>
                    <Parallel duration="2" Fps="30">
                       <Color StartValue="#ff3f3f" EndValue="#ffffff" Property="style" PropertyKey="backgroundColor"> </Color>
                    </Parallel>
                 </Sequence>
              </OnUpdated>
            </Animations>
            </cc1:updatepanelanimationextender>
        </form>
    2.后台
        protected void Calendar1_SelectionChanged(object sender, EventArgs e)
        {
            DateTime dateValue;
            dateValue = Convert.ToDateTime(Calendar1.SelectedDate);
            System.Threading.Thread.Sleep(5000);
            Label1.Text = dateValue.ToString();
        }

    实例解析二、实现局部更新效果
    效果:
     
    <%@ Page Language="C#" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <script runat="server">

        protected void Page_Load(object sender, EventArgs e)
        {
            if (IsPostBack)
            {
                System.Threading.Thread.Sleep(3000);
            }
            lbDateTime.Text = DateTime.Now.ToString();
        }
    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>UpdatePanelAnimation Demo</title>
       
        <style type="text/css">
            .updatePanelContainer
            {
                margin: 6px;
                450px;
                border: 1px solid black;
                text-align: center;
                font-size: 160%;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="sm" EnablePartialRendering="true" runat="server">
            </asp:ScriptManager>
            <div class="updatePanelContainer">
                <asp:UpdatePanel ID="myUpdatePanel" runat="server">
                    <ContentTemplate>
                        Current Time:
                        <asp:Label ID="lbDateTime" runat="server"></asp:Label>
                        <asp:Button ID="btnUpdate" runat="server" Text="Update" />
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
            <ajaxToolkit:UpdatePanelAnimationExtender ID="ae" TargetControlID="myUpdatePanel" runat="server">
                <Animations>
                    <OnUpdating>
                        <Sequence>
                            <EnableAction Enabled="false" />
                            <Color StartValue="#ffffff" EndValue="#777777" Property="style" PropertyKey="backgroundColor"/>
                        </Sequence>
                    </OnUpdating>
                    <OnUpdated>
                        <Sequence>
                            <EnableAction Enabled="true" />
                            <Color StartValue="#777777" EndValue="#ffffff" Property="style" PropertyKey="backgroundColor"/>
                            <Pulse Duration="0.1" />
                        </Sequence>
                    </OnUpdated>
                </Animations>
            </ajaxToolkit:UpdatePanelAnimationExtender>
        </form>
    </body>

  • 相关阅读:
    webpack搭建react+ts+eslint项目
    eslint规则详解
    js源码-自定义数组的pop和shift方法
    js源码-数组中的push()和unshift()方法的源码实现
    mac 下载MySQL后,需要这样打开
    react-(错误代码#31----Minified React error #31)
    人生反思:养殖场的猪该如何度过猪生?
    人生反思:做一头拉磨的驴子还是千里马?
    地图轨迹内插采集点
    同时支持回调和Promise的函数-callbackOrPromiseFn
  • 原文地址:https://www.cnblogs.com/astar/p/961086.html
Copyright © 2011-2022 走看看