목록에서 애니메이션 하나 선택(C#)
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>
그런 다음 , 특성 및 의무 사항을 제공하여 IDTargetControlID 페이지에 을 추가 AnimationExtender 합니다.runat="server":
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
노드 내에서 <Animations> 를 사용하여 <OnLoad> 페이지가 완전히 로드되면 애니메이션을 실행합니다. 일반 애니메이션 <Case> 중 하나 대신 요소가 재생됩니다. SelectScript 특성의 값이 계산됩니다. 반환 값은 숫자여야 합니다. 이 숫자에 따라 Case> 내<의 하위 애니메이션 중 하나가 실행됩니다. instance 경우 SelectScript가 2로 평가되면 제어 도구 키트는 대/소문>자 내에서 <세 번째 애니메이션을 실행합니다(계산은 0에서 시작).
다음 태그는 너비 크기 조정, 높이 크기 조정 및 페이드 아웃의 세 가지 하위 애니메이션을 정의합니다. 그런 다음 JavaScript 코드(Math.floor(3 * Math.random()))는 0에서 2 사이의 숫자를 선택하여 세 애니메이션 중 하나가 실행되도록 합니다.
<ajaxToolkit:AnimationExtender ID="ae" runat="server"
TargetControlID="Panel1">
<Animations>
<OnLoad>
<Case SelectScript="Math.floor(3 * Math.random())">
<Resize Width="1000" Unit="px" />
<Resize Height="150" Unit="px" />
<FadeOut Duration="1.5" Fps="24" />
</Case>
</OnLoad>
</Animations>
</ajaxToolkit:AnimationExtender>
가능한 세 가지 애니메이션 중 하나: 패널이 넓어집니다(전체 크기 이미지를 보려면 클릭).
