對 ASP.NET UpdatePanel 控制項進行動畫處理

目標：異步回發時為 UpdatePanel 添加動畫效果

利用 Microsoft AJAX Library 的客戶端 PageRequestManager 事件：beginRequest（回發前）與 pageLoaded（回發後）來觸發動畫。

前置需求

• Visual Studio 2008 / Visual Web Developer 2008
• 啟用 AJAX 的 ASP.NET 網站

建立動畫 JavaScript 類別

Type.registerNamespace("ScriptLibrary");
ScriptLibrary.BorderAnimation = function(startColor, endColor, duration) {
    this._startColor = startColor;
    this._endColor = endColor;
    this._duration = duration;
}
ScriptLibrary.BorderAnimation.prototype = {
    animatePanel: function(panelElement) {
        var s = panelElement.style;
        s.borderColor = this._startColor;
        window.setTimeout(function() { s.borderColor = this._endColor; }, this._duration);
    }
}
ScriptLibrary.BorderAnimation.registerClass('ScriptLibrary.BorderAnimation', null);

var panelUpdatedAnimation = new ScriptLibrary.BorderAnimation('blue', 'gray', 1000);
var postbackElement;

Sys.Application.add_load(ApplicationLoadHandler);
function ApplicationLoadHandler() {
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
}

function beginRequest(sender, args) {
    postbackElement = args.get_postBackElement();
}
function pageLoaded(sender, args) {
    var updatedPanels = args.get_panelsUpdated();
    if (typeof(postbackElement) === "undefined") return;
    if (postbackElement.id.toLowerCase().indexOf('animate') > -1) {
        for (var i=0; i < updatedPanels.length; i++)
            panelUpdatedAnimation.animatePanel(updatedPanels[i]);
    }
}
if(typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();

運作原理

1. 頁面載入時註冊 beginRequest、pageLoaded 事件。
2. 觸發回發的控件 ID 包含「animate」時，pageLoaded 遍歷更新的 Panel 執行邊框顏色漸變動畫（藍→灰，1 秒）。
3. animatePanel 使用 setTimeout 實現簡單色彩轉換。

可擴展為更豐富動畫（淡入淡出、滑動等），核心在於攔截部分更新面板的生命週期事件。