ASP.NET AJAX 컨트롤 도구 키트의 애니메이션 컨트롤은 컨트롤이 아니라 컨트롤에 애니메이션을 추가하는 전체 프레임워크입니다. 마우스 클릭과 같은 작업도 지원합니다. 그러나 마우스 클릭이 애니메이션을 시작하면 애니메이션 중에 마우스 클릭을 사용하지 않도록 설정하는 것이 좋습니다.
개요
ASP.NET AJAX 컨트롤 도구 키트의 애니메이션 컨트롤은 컨트롤이 아니라 컨트롤에 애니메이션을 추가하는 전체 프레임워크입니다. 마우스 클릭과 같은 작업도 지원합니다. 그러나 마우스 클릭이 애니메이션을 시작하면 애니메이션 중에 마우스 클릭을 사용하지 않도록 설정하는 것이 좋습니다.
단계
우선 페이지에 를 ScriptManager 포함합니다. 그런 다음 ASP.NET AJAX 라이브러리가 로드되어 Control Toolkit을 사용할 수 있습니다.
<asp:ScriptManager ID="asm" runat="server" />
애니메이션은 다음과 같이 HTML 단추에 적용됩니다.
<input type="button" ID="Button1" runat="server" Value="Launch Animation" />
HTML 컨트롤은 웹 컨트롤 대신 사용되므로 단추가 포스트백을 만들지 않도록 합니다. 클라이언트 쪽 애니메이션을 시작합니다.
그런 다음 , 특성 및 필수 를 제공하여 IDTargetControlID 를 페이지에 추가 AnimationExtender 합니다.runat="server"
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Button1">
노드 <OnClick> 내에서 <Animations> 는 마우스 클릭을 처리하는 데 적합한 요소입니다. 그러나 애니메이션 중에도 단추를 클릭할 수 있습니다.
<EnableAction> 요소는 이를 처리할 수 있습니다. 를 설정 Enabled="false" 하면 애니메이션의 일부로 단추가 비활성화됩니다. 단추와 실제 애니메이션을 사용하지 않도록 설정하는 여러 개별 애니메이션 <Parallel> 을 사용하므로 요소는 단일 애니메이션을 하나로 묶는 데 필요합니다. 다음은 에 대한 전체 태그입니다.AnimationExtender
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Button1">
<Animations>
<OnClick>
<Parallel>
<EnableAction Enabled="false" />
<FadeOut Duration="1.5" Fps="24" />
<Resize Width="1000" Height="150" Unit="px" />
</Parallel>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>
또한 목록 끝에 있는 다음 XML 요소를 사용하여 애니메이션 후 단추를 다시 사용하도록 설정할 수도 있습니다.
<EnableAction Enabled="true" />
그러나 지정된 시나리오에서는 단추가 페이드 아웃되고 애니메이션의 끝에 표시되지 않으므로 쓸모가 없습니다.
애니메이션이 실행되는 즉시 단추가 비활성화됩니다(전체 크기 이미지를 보려면 클릭).
