複数のアニメーションを同時に実行する (VB)
ASP.NET AJAX Control Toolkit の Animation コントロールは、単なるコントロールではなく、コントロールにアニメーションを追加するためのフレームワーク全体です。 複数のアニメーションを並列で実行できます。
概要
ASP.NET AJAX Control Toolkit の Animation コントロールは、単なるコントロールではなく、コントロールにアニメーションを追加するためのフレームワーク全体です。 複数のアニメーションを並列で実行できます。
手順
まず、ページに を 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
し、 属性と必須runat="server"
の を指定ID
TargetControlID
します。
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
ノード内で を <Animations>
使用 <OnLoad>
して、ページが完全に読み込まれたらアニメーションを実行します。 一般に、 <OnLoad>
1 つのアニメーションのみを受け入れます。 Animation フレームワークを使用すると、 要素を使用して <Parallel>
複数のアニメーションを 1 つに結合できます。 内 <Parallel>
のすべてのアニメーションが同時に実行されます。
コントロールの可能なマークアップを次に AnimationExtender
示します。フェードアウトと同時にパネルのサイズを変更します。
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
<Animations>
<OnLoad>
<Parallel>
<FadeOut Duration="1.5" Fps="24" />
<Resize Width="1000" Height="150" Unit="px" />
</Parallel>
</OnLoad>
</Animations>
</ajaxToolkit:AnimationExtender>
そして実際に:このスクリプトを実行すると、パネルが表示され、(幅を3倍にして高さを半減させる以上の)サイズが変更され、同時にフェードアウトします。
パネルのフェードアウトとサイズ変更 (ブラウザーのレンダリング エンジンによるコンテンツを含む) (フルサイズの画像を表示する をクリックします)
フィードバック
https://aka.ms/ContentUserFeedback」を参照してください。
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「フィードバックの送信と表示