AngularJS 응용 프로그램의 JavaScript 애니메이션
AngularJS는 단일 페이지 웹 애플리케이션을 구축하기위한 훌륭한 프레임 워크이며 애니메이션 지원은 주요 기능 중 하나입니다. JavaScript 애니메이션은 AngularJS 응용 프로그램에 애니메이션 효과를 추가하는 데 사용될 수 있습니다.
- 메소드로 정의됩니다. 애니메이션 이름은 각 애니메이션 작업으로 시작됩니다. 각 애니메이션 작업은 두 개의 매개 변수를 수용합니다.
-
> 애니메이션은 NG-View, NG-Repeat, NG-Hide 및 Custom Directives와 같은 다양한 AngularJS 지침에 적용될 수 있습니다. 예를 들어, NG-View 지시문에 애니메이션을 추가하여 사용자가보기간에 전환 할 때 시각적 효과를 만들 수 있습니다.
애니메이션은 애플리케이션을보다 생생하고 과도하게 사용하면 애플리케이션이 느려질 수 있으며 최종 사용자를 압도 할 수 있습니다. 따라서 애니메이션은 최적화되고 전략적으로 사용되어야합니다. -
animationAngularJS는 풍부하고 대화식 응용 프로그램을 구축하는 데 필요한 모든 기능을 제공하는 단일 페이지 웹 애플리케이션을 만드는 기능이 풍부한 프레임 워크입니다. Angular의 주요 특징 중 하나는 애니메이션 지원입니다. - 각도에서 CSS와 JavaScript 애니메이션의 유일한 차이점은 정의 방법입니다. 정의 된 애니메이션이 어떻게 사용되는지에는 차이가 없습니다. 먼저, nganimate 모듈을 응용 프로그램의 루트 모듈에로드해야합니다.
-
JavaScript 애니메이션으로 처리 할 애니메이션 이벤트도 변경되지 않았습니다. 다음은 애니메이션과 다른 작업에 대한 이벤트를 지원하는 명령 목록입니다.
이벤트
angular.module('coursesApp', ['ngAnimate']);로그인 후 복사
로그인 후 복사
로그인 후 복사
입력,
를 떠나십시오 <<> ng-include ng-switch 입력,
angular.module('coursesApp', ['ngAnimate']);로그인 후 복사
로그인 후 복사
로그인 후 복사
-
-
ng-view 에 애니메이션을 추가하십시오
-
다음 애니메이션은보기가 페이지에 들어가면 시각적 효과를냅니다.
우리는 JQuery, Greensock, Anima 등과 같은 많은 JavaScript 라이브러리가있어 애니메이션 작성 작업을 단순화합니다. 단순화하기 위해 jQuery를 사용 하여이 기사에서 애니메이션을 만듭니다. 다른 도서관에 대해 알아 보려면 해당 웹 사이트를 방문 할 수 있습니다. animes는 angularjs 응용 프로그램의 뷰 사이를 전환 할 때 애니메이션이 NG-View 지시문에 적용됩니다. 위의 표에서 볼 수 있듯이보기가 들어가거나 떠날 때 애니메이션을 추가 할 수 있습니다. 두 경우 모두를 다룰 필요가 없습니다. 위의 코드는보기가 페이지에 들어가면 슬라이딩 효과를 만듭니다. 완료된 메소드는 콜백으로 전달됩니다. 이는 애니메이션이 완료되고 프레임 워크가 다음 작업으로 진행될 수 있음을 나타냅니다. 메소드가 어떻게 호출되는지 확인하십시오. AngularJS가로드되기 전에 jQuery 라이브러리가로드되기 때문에 요소를 jQuery 객체로 변환 할 필요가 없습니다. -
에 애니메이션을 추가하십시오
ng-repeat는 많은 옵션을 제공하는 가장 중요한 지침 중 하나입니다. 이 명령어의 두 가지 기본 작업은 필터링 및 정렬입니다. 수행 된 작업 유형에 따라 명령에 따른 항목이 추가, 삭제 또는 이동합니다.
ng-hide 지시문은 대상 요소의 NG-Hide CSS 클래스를 추가하거나 제거합니다. 애니메이션을 적용하려면 CSS 클래스를 추가하고 삭제하는 상황을 처리해야합니다. 클래스 이름은 애니메이션 핸들러 클래스로 전달됩니다. 이를 통해 수업을 확인하고 적절한 조치를 취할 수 있습니다.
angular.module('coursesApp').animation('.name-of-animation', function(<injectables></injectables>) {
return {
event: function(elem, done){
// 动画逻辑
done();
}
};
});로그인 후 복사
로그인 후 복사
는 AngularJS Core 프레임 워크의 일부이지만 서비스를 이용하기 위해 Nganimate를로드해야합니다.
angular.module('coursesApp', ['ngAnimate']);로그인 후 복사
로그인 후 복사
로그인 후 복사
angular.module('coursesApp').animation('.name-of-animation', function(<injectables></injectables>) {
return {
event: function(elem, done){
// 动画逻辑
done();
}
};
});로그인 후 복사
로그인 후 복사
결론 <🎜 🎜>