ASP.NET AJAX 컨트롤 도구 키트의 애니메이션 컨트롤은 컨트롤뿐만 아니라 컨트롤에 애니메이션을 추가하는 전체 프레임워크입니다. 사용자 지정 클라이언트 쪽 JavaScript 코드를 사용하여 애니메이션 실행을 트리거할 수도 있습니다.
개요
ASP.NET AJAX 컨트롤 도구 키트의 애니메이션 컨트롤은 컨트롤뿐만 아니라 컨트롤에 애니메이션을 추가하는 전체 프레임워크입니다. 사용자 지정 클라이언트 쪽 JavaScript 코드를 사용하여 애니메이션 실행을 트리거할 수도 있습니다.
단계
우선 페이지에 를 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>
그런 다음 , 특성 및 의무 를 TargetControlIDID제공하여 페이지에 을 추가 AnimationExtender 합니다.runat="server"
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
노드 내에서 <Animations> 사용자가 패널을 클릭하면 를 사용하여 <OnClick> 애니메이션을 실행합니다. 병렬로 실행할 두 개의 애니메이션을 추가합니다.
<Animations>
<OnClick>
<Parallel>
<FadeOut Duration="1.5" Fps="24" />
<Resize Width="1000" Height="150" Unit="px" />
</Parallel>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>
데모를 위해 이 애니메이션(및 컨트롤 도구 키트를 사용하여 만든 다른 애니메이션)은 페이지가 실행되면 JavaScript 코드를 사용하여 실행됩니다. 우선 컨트롤에 AnimationExtender 액세스해야 합니다. ASP.NET AJAX 라이브러리는 이 작업에 대한 함수를 제공합니다 $find() .
var ae = $find("ae");
컨트롤은 AnimationExtender XML 태그 OnClick()에 사용되는 이벤트 처리기와 이름이 동일한 메서드( , OnLoad()등)를 포함하여 풍부한 API를 노출합니다. instance 경우 메서드의 호출은 OnClick() 컨트롤의 요소 내에서 애니메이션을 <OnClick>AnimationExtender 실행합니다.
ae.OnClick();
페이지가 완전히 로드되면 패널의 클릭을 에뮬레이트하는 전체 클라이언트 쪽 JavaScript 코드는 페이지와 포함된 모든 JavaScript 라이브러리가 로드 pageLoad() 되면 ASP.NET AJAX에서 호출되는 함수 이름이 사용됩니다.
<script type="text/javascript">
function pageLoad() {
var ae = $find("ae");
ae.OnClick();
}
</script>
애니메이션은 마우스 클릭 없이 즉시 실행됩니다(전체 크기 이미지를 보려면 클릭).
