クライアント側コードを使用してアニメーションを実行する (C#)
作成者: Christian Wenz
ASP.NET AJAX Control Toolkit の Animation コントロールは、単なるコントロールではなく、コントロールにアニメーションを追加するためのフレームワーク全体です。 アニメーションの実行は、カスタム クライアント側の JavaScript コードを使用してトリガーすることもできます。
概要
ASP.NET AJAX Control Toolkit の Animation コントロールは、単なるコントロールではなく、コントロールにアニメーションを追加するためのフレームワーク全体です。 アニメーションの実行は、カスタム クライアント側の JavaScript コードを使用してトリガーすることもできます。
手順
まず、ページに ScriptManager を含めます。これにより、ASP.NET AJAX ライブラリが読み込まれ、Control Toolkit を使用できるようになります。
<asp:ScriptManager ID="asm" runat="server" />
アニメーションは、次のようなテキストのパネルに適用されます。
<asp:Panel ID="panelShadow" runat="server" CssClass="panelClass">
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
</asp:Panel>
パネルに関連付けられている CSS クラスで、適切な背景色を定義し、パネルの固定幅も設定します。
<style type="text/css">
.panelClass {background-color: lime; width: 300px;}
</style>
次に AnimationExtender をページに追加し、ID、TargetControlID 属性、必須の runat="server" を追加します。
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
<Animations> ノード内で、<OnClick> を使用して、ユーザーがパネルをクリックしたときにアニメーションを実行します。 並行して実行する 2 つのアニメーションを追加します。
<Animations>
<OnClick>
<Parallel>
<FadeOut Duration="1.5" Fps="24" />
<Resize Width="1000" Height="150" Unit="px" />
</Parallel>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>
デモンストレーションのために、このアニメーション (および Control Toolkit を使用して作成されたその他のアニメーション) は、ページが実行されると JavaScript コードを使用して実行されます。 まず、AnimationExtender コントロールへのアクセスが必要です。 ASP.NET AJAX ライブラリは、このタスク用の $find() 関数を提供します。
var ae = $find("ae");
AnimationExtender コントロールは、XML マークアップで使用されるイベント ハンドラーと同じ名前のメソッド (OnClick()、OnLoad() など) を含む豊富な API を公開します。 たとえば、OnClick() メソッドを呼び出すと、AnimationExtender コントロールの <OnClick> 要素内のアニメーションが実行されます。
ae.OnClick();
以下は、ページが完全に読み込まれた後のパネル上のクリックをエミュレートする完全なクライアント側 JavaScript コードです。ページと含まれるすべての JavaScript ライブラリが読み込まれると、ASP.NET AJAX によって呼び出される pageLoad() 関数名が使用されることに注意してください。
<script type="text/javascript">
function pageLoad() {
var ae = $find("ae");
ae.OnClick();
}
</script>
アニメーションは、マウスをクリックしなくてもすぐに実行されます (クリックしてフルサイズの画像を表示します)
