AngularJS 응용 프로그램에서 JavaScript 애니메이션 효과를 구현하십시오
AngularJS는 단일 페이지 웹 애플리케이션을 만들기위한 풍부한 프레임 워크 세트로, 필요한 모든 기능을 풍부하고 대화식 응용 프로그램 구축에 제공합니다. 주요 특징 중 하나는 Angular가 애니메이션을 지원한다는 것입니다.
응용 프로그램의 일부 내용에서 애니메이션을 사용하여 일부 변경이 발생하고 있음을 보여줄 수 있습니다. 마지막 기사에서는 Angular Applications에서 CSS 애니메이션 지원에 대해 이야기했습니다. 이 기사에서는 JavaScript 스크립트를 사용하여 AngularJS 응용 프로그램에서 애니메이션 효과를 생성하는 방법을 살펴 봅니다.
각도에서 CSS와 JavaScript의 유일한 차이점은 그들의 정의입니다. 정의 된 애니메이션이 사용되는 것을 방지하는 차이는 없습니다. 먼저, nganimate 모듈을 응용 프로그램의 루트 모듈에로드해야합니다.
Angular.Module ( 'CoursesApp', [ 'nganimate']);
처리 할 모든 JavaScript 애니메이션 이벤트는 변경되지 않았습니다. 다음은 직접 지원되는 애니메이션 및 해당 다른 동작 목록입니다.
교육 이벤트 세트
ng-view
ng-include
ng-switch
ng-if 입력
떠나다
ng-repeat Enter
떠나다
이동하다
ng-show
NG-HIDE
NG 클래스 추가
제거하다
위의 목록은 이전 기사와 동일하지만 JavaScript 애니메이션을 정의하는 데 사용할 필요가 없기 때문에 해당 CSS 클래스를 언급하지 않습니다. 이러한 모든 이벤트는 응용 프로그램 모듈이 Nganimate 모듈을로드 한 후에 만 발생합니다. 이제 이러한 지침을 움직이는 방법을 살펴 보겠습니다.
맞춤 각도 애니메이션의 구문
다음은 사용자 정의 자바 스크립트 애니메이션을위한 기본 프레임 워크입니다.
Angular.Module ( 'CoursesApp'). 애니메이션 ( '. 이름의 이름', 함수 (<injectables>) {return {event : function (elem, dode) {// animation dod ();}};});AngularJS에서 JavaScript 애니메이션을 작성할 때 기억해야 할 몇 가지 핵심 사항이 있습니다.
1. 애니메이션의 이름은 점 (.)으로 시작합니다.
2. 모든 애니메이션 동작은 두 가지 매개 변수를 수락합니다.
• 애니메이션을 실행하려는 DOM 요소의 객체는 AngularJS가로드되기 전에로드 된 JQLITE 객체 또는 jQuery 객체입니다.
• 애니메이션 끝에 콜백 기능. 콜백 함수가 호출 될 때까지 명령어에 해당하는 조치가 일시 중지됩니다.
JQuery, Greensock, Anima 및 애니메이션을 쉽게 작성할 수있는 여러 라이브러리와 같은 여러 JavaScript 라이브러리가 있습니다. 간단하게 유지하기 위해 jQuery를 사용 하여이 게시물에서 애니메이션을 만듭니다. 다른 여러 라이브러리를 배우려면 해당 웹 사이트를 방문 할 수 있습니다.
ng-view를 움직입니다
AngularJS 응용 프로그램의 뷰를 전환 할 때 NG-View 지시문에 사용되는 애니메이션은 실행됩니다.
보기가 나타날 때 애니메이션으로 인한 시각적 효과는 다음과 같습니다.
CourseAppanimations.animation ( '. view-slide-in', function () {return {enter : enter : function (element, done) {eLECT.CSS ({exacity : 0.5, 위치 : "상대 :"10px ", 왼쪽 :"20px "}).위의 내용은보기가 화면에 들어가면 슬라이드 인 효과를 만듭니다. 완료된 메소드는 콜백 함수로 전달됩니다. 이것은 애니메이션이 끝났고 이제 AngularJS 프레임 워크가 다음 액션과 함께 계속 될 수 있음을 보여줍니다.
animate () 메소드가 호출되는 방법에 유의하십시오. jQuery가 AngularJS를로드하기 전에 이미로드 되었기 때문에이 요소를 jQuery 객체로 변환 할 필요가 없습니다.
이제이 애니메이션 효과를 NG-View 지시문에 적용해야합니다. 이 애니메이션은 JavaScript로 정의되어 있지만 동의 한대로 대상 지침에 적용하기 위해 클래스 태그를 사용합니다.
NG- 반복 애니메이션
사용하도록 선택할 수있는 지침 중에서 NG-Repeat는 매우 중요한 명령입니다. 필터링 및 정렬의 두 가지 기본 작동 지침이 있습니다. 수행 된 작업에 따라 해당 지침을 추가, 이동 또는 제거하십시오.
다음은 일부 기본 애니메이션의 사용을 보여 주며 변경이 발생하면 해당 애니메이션 효과를 볼 수 있습니다.
CourseAppanimations.animation ( '. 반복 -애니메이션', function () {return {en 함수 (element.css. 완료); } };});NG 헤드 애니메이션
NG-Hide 지시문은 대상 요소의 NG 헤드 스타일 클래스를 추가하거나 제거하는 데 사용됩니다. 애니메이션을 사용하려면 종종 CSS 스타일을 추가하거나 제거해야합니다. 이 효과를 달성하려면 클래스 이름을 애니메이션 프로세싱 클래스에 전달하십시오. 이를 통해이 클래스를 확인하고 코드를 적절히 수정할 수 있습니다.
다음은 NG-Hide 지시문을 사용하여 요소의 페이딩 및 점진적인 디스플레이 효과를 달성하는 애니메이션 샘플 코드입니다.
CourseAppanimations.animation ( '. hide-animation', function () {return {return {beforeaddclass : function (element, classname, done) {if (classname === 'ng-hide') {element.animate ({불투명도 : 0}, 500, doing); (ClassName === 'ng-hide') {election.css ({불투명도 : 1}, done);사용자 정의 명령을 움직입니다
사용자 정의 지시문을 애니메이션으로 만들려면 $ 애니메이션 서비스를 사용해야합니다. $ Animate Service는 AngularJS Core 프레임 워크의 일부이지만,이 서비스가 가장 큰 역할을하기 전에 Nganimate를로드해야합니다.
이전 기사의 동일한 예제를 사용하여 1 페이지 코스 목록을 제시합니다. 그리드의 코스 세부 사항을 표시하는 명령을 작성하고 "통계보기"링크를 클릭하면 그리드의 내용이 변경됩니다. 이 전환 효과를 사용자에게 제시하기 위해 애니메이션을 추가합시다.
변환 애니메이션이 시작되면 CSS 클래스 태그를 추가하고 마지막에는이 클래스 태그를 제거합니다. 이 지침의 샘플 코드는 다음과 같습니다.
app.directive ( 'coursedetails', function ($ animate) {return {scope : true, templateUrl : 'coursedEtails.html', link : function (scope, elem, attrs) {scope.viewdetails = true; elem.find ( 'click'). {removeclass (스위칭).보시다시피, 우리는 애니메이션 끝 에서이 액션을 수행합니다. 브라우저의 개발자 도구에서 지시 요소를 살펴보면 스위칭 활성 및 전환 add의 두 클래스 태그가 빠르게 추가 된 다음 제거되고 있음을 알 수 있습니다. CSS 변환 스타일 또는 사용자 정의 JavaScript 애니메이션을 정의하여 애니메이션의 효과를 볼 수 있습니다. 다음은 위에서 언급 한 지침에 사용할 수있는 간단한 CSS 변환 스타일입니다. 단순화를 위해 특정 접두사를 제거했습니다.
.det-anim.switching {전환 : 모든 1s 선형; 위치 : 상대; 불투명도 : 0.5; 왼쪽 : -20px;}또는 다음은 동일한 지침에 사용할 수있는 jQuery가 작성한 애니메이션입니다.
courseAppanimations.animation ( '. js-anim', function () {return {return {beforeaddclass : function (element, classname, done) {if (classname === 'switching') {element.animate ({불투명도 : 0}, 1000, function () {exacity : 1});}); }}}});이 애니메이션에서 내장 지침에 적용 할 수 있다면 사용자 정의 지침에도 적용 할 수도 있습니다.
<div course-details>/div>
예제 페이지에서 실행되는 위의 모든 애니메이션의 효과를 볼 수 있습니다.
결론적으로
애니메이션은 적절하고 적절하게 사용될 때 응용 프로그램에 분노를 가져다 줄 것입니다. 우리가 보았 듯이 AngularJS는 CSS 및 JavaScript 애니메이션 모두에 대한 다양한 지원을 제공합니다. 팀의 상황에 따라 그 중 하나를 선택할 수 있습니다.
그러나 너무 많은 애니메이션을 사용하면 응용 프로그램이 느려져서 응용 프로그램이 사용자에게 미숙 한 모습으로 보일 수 있습니다. 따라서이 무기를 사용하려면 신중하고 최적화해야합니다.