다른 컨트롤에서 애니메이션 트리거(C#)

작성자: Christian Wenz

PDF 다운로드

ASP.NET AJAX 컨트롤 도구 키트의 애니메이션 컨트롤은 컨트롤뿐만 아니라 컨트롤에 애니메이션을 추가하는 전체 프레임워크입니다. 일반적으로 애니메이션 시작은 동일한 컨트롤과의 사용자 상호 작용에 의해 트리거됩니다. 그러나 한 컨트롤과 상호 작용한 다음 다른 컨트롤을 애니메이션할 수도 있습니다.

개요

ASP.NET AJAX 컨트롤 도구 키트의 애니메이션 컨트롤은 컨트롤뿐만 아니라 컨트롤에 애니메이션을 추가하는 전체 프레임워크입니다. 일반적으로 애니메이션 시작은 동일한 컨트롤과의 사용자 상호 작용에 의해 트리거됩니다. 그러나 한 컨트롤과 상호 작용한 다음 다른 컨트롤을 애니메이션할 수도 있습니다.

단계

우선 페이지에 를 ScriptManager 포함합니다. 그런 다음 ASP.NET AJAX 라이브러리가 로드되어 제어 도구 키트를 사용할 수 있습니다.

<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>

패널에 애니메이션 효과를 적용하기 위해 HTML 단추가 사용됩니다. 사용자가 해당 <input type="button" /> 단추를 클릭할 때 포스트백을 원하지 않기 때문에 선호 <asp:Button /> 됩니다.

<input type="button" id="Button1" runat="server" Value="Launch Animation" />

그런 다음 , 특성 및 필수 를 TargetControlIDID제공하여 페이지에 을 추가 AnimationExtender 합니다runat="server". 패널의 ID(애니메이션되는 요소)가 아니라 단추의 ID(애니메이션을 트리거하는 요소)로 설정하는 TargetControlID 것이 중요합니다.

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Button1">

노드 내에서 <Animations> 애니메이션을 평소와 같이 배치합니다. 단추가 아닌 패널을 변경하려면 내AnimationExtender의 AnimationTarget 모든 애니메이션 요소에 대한 특성을 설정합니다. 에 대한 AnimationTarget 값은 물론 패널의 ID입니다. 이렇게 하면 애니메이션은 트리거 단추가 아닌 패널에서 발생합니다. 이 시나리오에 AnimationExtender 대한 태그는 다음과 같습니다.

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
 <Animations>
 <OnClick>
 <Sequence>
 <EnableAction Enabled="false" />
 <Parallel>
 <FadeOut Duration="1.5" Fps="24" AnimationTarget="Panel1" />
 <Resize Width="1000" Height="150" Unit="px" 
 AnimationTarget="Panel1" />
 </Parallel>
 </Sequence>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

개별 애니메이션이 표시되는 특수 순서를 확인합니다. 우선 애니메이션이 실행되면 단추가 비활성화됩니다. 요소에 <EnableAction> 특성이 없 AnimationTarget 으므로 이 애니메이션은 원래 컨트롤인 단추에 적용됩니다. 다음 두 애니메이션 단계는 병렬(<Parallel> 요소)로 수행되어야 합니다. 둘 다 특성 AnimationTarget 이 로 "Panel1"설정되어 있으므로 단추가 아닌 패널에 애니메이션 효과를 갖습니다.

단추를 마우스로 클릭하면 패널 애니메이션이 시작됩니다(전체 크기 이미지를 보려면 클릭).

이전다음