AngularJS 응용 프로그램의 JavaScript 애니메이션

코어 포인트

AngularJS는 단일 페이지 웹 애플리케이션을 구축하기위한 훌륭한 프레임 워크이며 애니메이션 지원은 주요 기능 중 하나입니다. JavaScript 애니메이션은 AngularJS 응용 프로그램에 애니메이션 효과를 추가하는 데 사용될 수 있습니다.

사용자 정의 각도 JavaScript 애니메이션은 각도 모듈의

메소드로 정의됩니다. 애니메이션 이름은 각 애니메이션 작업으로 시작됩니다. 각 애니메이션 작업은 두 개의 매개 변수를 수용합니다.
• > 애니메이션은 NG-View, NG-Repeat, NG-Hide 및 Custom Directives와 같은 다양한 AngularJS 지침에 적용될 수 있습니다. 예를 들어, NG-View 지시문에 애니메이션을 추가하여 사용자가보기간에 전환 할 때 시각적 효과를 만들 수 있습니다.
애니메이션은 애플리케이션을보다 생생하고 과도하게 사용하면 애플리케이션이 느려질 수 있으며 최종 사용자를 압도 할 수 있습니다. 따라서 애니메이션은 최적화되고 전략적으로 사용되어야합니다.
• animation AngularJS는 풍부하고 대화식 응용 프로그램을 구축하는 데 필요한 모든 기능을 제공하는 단일 페이지 웹 애플리케이션을 만드는 기능이 풍부한 프레임 워크입니다. Angular의 주요 특징 중 하나는 애니메이션 지원입니다.
우리는 응용 프로그램의 일부를 애플리케이션하여 발생하는 변경 사항을 나타낼 수 있습니다. 마지막 게시물에서 나는 Angular Applications에서 CSS 애니메이션에 대한 지원을 소개했습니다. 이 기사에서는 JavaScript를 사용하여 AngularJS 응용 프로그램에 애니메이션을 추가하는 방법을 배웁니다.
• 각도에서 CSS와 JavaScript 애니메이션의 유일한 차이점은 정의 방법입니다. 정의 된 애니메이션이 어떻게 사용되는지에는 차이가 없습니다. 먼저, nganimate 모듈을 응용 프로그램의 루트 모듈에로드해야합니다.
• JavaScript 애니메이션으로 처리 할 애니메이션 이벤트도 변경되지 않았습니다. 다음은 애니메이션과 다른 작업에 대한 이벤트를 지원하는 명령 목록입니다.

지시 사항

이벤트

angular.module('coursesApp', ['ngAnimate']);

ng-view

입력,

를 떠나십시오 ng-include 입력, ng-switch

입력, ng-if Enter, ng-repeat 입력, 떠나고, 이동하고, 움직이고, ng-show ng-hide 추가, ng class 추가, 위의 목록은 이전 게시물의 목록과 동일하지만 JavaScript 애니메이션을 정의 할 필요가 없기 때문에 해당 CSS 클래스를 언급하지 않습니다. 이러한 이벤트는 응용 프로그램 모듈이 Nganimate 모듈을로드 할 때만 생성됩니다. 이제 몇 가지 지침을 애니메이션하는 방법을 살펴 보겠습니다. 사용자 정의 각도 구문 사용자 정의 자바 스크립트 애니메이션의 기본 프레임 워크는 다음과 같습니다.

angular.module('coursesApp', ['ngAnimate']);

angularjs에서 JavaScript 애니메이션을 작성할 때 다음 사항을 기억하십시오.

애니메이션 이름은 점 (.)으로 시작합니다.

각 애니메이션 작업은 두 개의 매개 변수를 수락합니다 : 애니메이션을 적용 할 현재 DOM 요소 인 객체. AngularJS가로드되기 전에 jQuery가로드되지 않으면 jqlite 객체입니다.

애니메이션이 완료된 후 호출 된 콜백 함수. 완료 된 함수를 호출하기 전에 명령의 작동이 일시 중지됩니다.
2. 우리는 JQuery, Greensock, Anima 등과 같은 많은 JavaScript 라이브러리가있어 애니메이션 작성 작업을 단순화합니다. 단순화하기 위해 jQuery를 사용 하여이 기사에서 애니메이션을 만듭니다. 다른 도서관에 대해 알아 보려면 해당 웹 사이트를 방문 할 수 있습니다.
   • ng-view
   에 애니메이션을 추가하십시오 animes는 angularjs 응용 프로그램의 뷰 사이를 전환 할 때 애니메이션이 NG-View 지시문에 적용됩니다. 위의 표에서 볼 수 있듯이보기가 들어가거나 떠날 때 애니메이션을 추가 할 수 있습니다. 두 경우 모두를 다룰 필요가 없습니다.
   • 다음 애니메이션은보기가 페이지에 들어가면 시각적 효과를냅니다.
   위의 코드는보기가 페이지에 들어가면 슬라이딩 효과를 만듭니다. 완료된 메소드는 콜백으로 전달됩니다. 이는 애니메이션이 완료되고 프레임 워크가 다음 작업으로 진행될 수 있음을 나타냅니다.
메소드가 어떻게 호출되는지 확인하십시오. AngularJS가로드되기 전에 jQuery 라이브러리가로드되기 때문에 요소를 jQuery 객체로 변환 할 필요가 없습니다.

이제이 애니메이션을 NG-View 지시문에 적용해야합니다. 애니메이션은 JavaScript로 정의되지만 컨벤션별로 대상 지침의 클래스를 사용하여 적용합니다.

ng-repeat

에 애니메이션을 추가하십시오 ng-repeat는 많은 옵션을 제공하는 가장 중요한 지침 중 하나입니다. 이 명령어의 두 가지 기본 작업은 필터링 및 정렬입니다. 수행 된 작업 유형에 따라 명령에 따른 항목이 추가, 삭제 또는 이동합니다.

사용자가 변경이 발생할 때 확인할 수 있도록 몇 가지 기본 애니메이션을 적용해 봅시다.

ng-hide에 애니메이션을 추가하십시오

ng-hide 지시문은 대상 요소의 NG-Hide CSS 클래스를 추가하거나 제거합니다. 애니메이션을 적용하려면 CSS 클래스를 추가하고 삭제하는 상황을 처리해야합니다. 클래스 이름은 애니메이션 핸들러 클래스로 전달됩니다. 이를 통해 수업을 확인하고 적절한 조치를 취할 수 있습니다.

다음은 NG-Hide 지시문이 활성화되거나 비활성화 될 때 요소로 사라지거나 사라지는 애니메이션 코드 예제입니다.

angular.module('coursesApp').animation('.name-of-animation', function(<injectables></injectables>) {
  return {
    event: function(elem, done){
      // 动画逻辑
      done();
    }
  };
});

애니메이션 사용자 정의 명령 추가 사용자 정의 지침에 애니메이션을 추가하려면 서비스를 사용해야합니다.

는 AngularJS Core 프레임 워크의 일부이지만 서비스를 이용하기 위해 Nganimate를로드해야합니다.

이전 게시물에서와 동일한 데모를 사용하면 코스 목록이있는 페이지가 표시됩니다. 우리는 상자에 코스의 세부 사항을 표시하는 지침을 만듭니다. "통계보기"링크를 클릭하면 상자의 내용이 변경됩니다. 사용자가 전환을 볼 수 있도록 애니메이션을 추가합시다.

전환이 발생하면 CSS 클래스를 추가하여 애니메이션이 완료된 후 삭제됩니다. 이 지침의 코드는 다음과 같습니다

보시다시피, 우리는 애니메이션이 완료된 후에 동작을 수행합니다. 브라우저 개발자 도구에서 지시 요소를 확인할 때 클래스가 전환 활성 및 전환 add가 추가되어 매우 빠르게 제거되는 것을 볼 수 있습니다. CSS 전환을 정의하거나 JavaScript 애니메이션을 사용자 정의하여 발생하는 애니메이션을 볼 수 있습니다. 다음은 위의 지시문과 함께 사용할 수있는 예제 CSS 전환입니다 (간결성을 위해 공급 업체 접두사가 생략 됨) :

또는 다음은 동일한 지침에 사용할 수있는 jQuery 애니메이션입니다.

angular.module('coursesApp', ['ngAnimate']);

이 애니메이션 중 하나는 내장 지시에 애니메이션을 적용하는 것처럼 사용자 정의 지시문에 적용 할 수 있습니다.

데모 페이지에서 위의 모든 애니메이션의 실제 효과를 볼 수 있습니다.

angular.module('coursesApp').animation('.name-of-animation', function(<injectables></injectables>) {
  return {
    event: function(elem, done){
      // 动画逻辑
      done();
    }
  };
});

결론 애니메이션은 적절하고 기능적으로 사용하면 응용 프로그램을 더욱 생생하게 만들 수 있습니다. 우리가 볼 수 있듯이 AngularJS는 CSS 및 JavaScript 애니메이션을 풍부하게 지원합니다. 팀의 상황에 따라 이들 중 하나를 선택할 수 있습니다.

그러나 애니메이션을 많이 사용하면 응용 프로그램이 느려질 수 있으며 응용 프로그램은 최종 사용자에게 과다 디자인 된 것 같습니다. 따라서이 무기는주의와 최적화로 사용해야합니다.

courseAppAnimations.animation('.view-slide-in', function () {
  return {
    enter: function(element, done) {
      element.css({
        opacity: 0.5,
        position: "relative",
        top: "10px",
        left: "20px"
      })
      .animate({
        top: 0,
        left: 0,
        opacity: 1
        }, 1000, done);
    }
  };
});

AngularJS 응용 프로그램 (FAQ)의 JavaScript 애니메이션에 대한 FAQ AngularJS에서 기본 애니메이션을 만드는 방법은 무엇입니까?

AngularJS에서 기본 애니메이션을 만드는 데 몇 단계가 포함됩니다. 먼저 프로젝트에 AngularJS 애니메이션 라이브러리를 포함해야합니다. 이는 HTML 파일의 "Angular-Animate.js"파일에 대한 참조를 추가하여 달성 할 수 있습니다. 다음으로 "NGANIMATE"모듈을 AngularJS 응용 프로그램에 주입해야합니다. 이는 응용 프로그램 모듈의 종속성으로 "nganimate"를 추가하여 달성 할 수 있습니다. 이 작업을 수행 한 후에는 CSS 클래스 및 AngularJS 지침을 사용하여 애니메이션을 만들 수 있습니다. 예를 들어, "ng-enter"및 "ng-leave"클래스를 사용하여 DOM에 들어가거나 떠날 때 요소를 애니메이션 할 수 있습니다.

AngularJS 애니메이션의 주요 구성 요소는 무엇입니까?

<div class="view-slide-in" ng-view=""></div>

AngularJS 애니메이션은 주로 CSS와 JavaScript의 두 가지 주요 구성 요소로 구성됩니다. CSS는 애니메이션의 스타일과 전환을 정의하는 데 사용되며 JavaScript는 애니메이션의 시간과 순서를 제어하는 ​​데 사용됩니다. AngularJS에서 애니메이션은 CSS 클래스를 "NG-Repeat", "NG-Switch"및 "NG-View"와 같은 특정 AngularJS 지시문과 연관하여 생성됩니다. 이 지침은 적절한 시간에 관련 CSS 클래스를 자동으로 추가 및 삭제하므로 최소한의 JavaScript 코드로 복잡한 애니메이션을 만들 수 있습니다.

AngularJS에서 애니메이션 시간을 제어하는 ​​방법은 무엇입니까?

CSS 전환 및 애니메이션은 AngularJS에서 애니메이션 시간을 제어하는 ​​데 사용될 수 있습니다. CSS 클래스에서 "전환 기간"또는 "애니메이션 기간"속성을 지정하면 애니메이션이 지속되는 시간을 제어 할 수 있습니다. 또한 "Transition-Delay"또는 "Animation-Delay"속성을 사용하여 애니메이션의 시작 시간을 제어 할 수 있습니다. 이러한 특성은 초 (S) 또는 밀리 초 (MS)로 지정할 수 있습니다.

JavaScript를 사용하여 AngularJS에서 애니메이션을 만들 수 있습니까?

예, JavaScript를 사용하여 AngularJS에서 애니메이션을 만들 수 있습니다. CSS는 종종 간단한 애니메이션에 사용되지만 JavaScript는 애니메이션의 타이밍과 순서를 정확하게 제어 해야하는보다 복잡한 애니메이션에 사용할 수 있습니다. AngularJS에서는 "$ animate"서비스를 사용하여 프로그래밍 방식으로 애니메이션을 제어 할 수 있습니다. 이 서비스는 CSS 클래스를 추가, 삭제 및 쿼리하는 방법을 제공하여 JavaScript를 사용하여 복잡한 애니메이션을 만들 수 있습니다.

angularjs에 DOM에 들어가거나 떠날 때 요소를 애니메이션하는 방법은 무엇입니까?

angularjs에서는 "ng-enter"및 "ng-leave"클래스를 사용하여 DOM에 들어가거나 떠날 때 요소를 애니메이션 할 수 있습니다. AngularJS는 요소가 DOM을 입력하거나 떠날 때 이러한 클래스를 자동으로 추가하고 제거합니다. 이러한 클래스의 CSS 전환 또는 애니메이션을 정의하면 요소가 DOM에 들어가거나 떠날 때 트리거되는 애니메이션을 만들 수 있습니다.

"ng-repeat"와 함께 Angularjs 애니메이션을 사용하는 방법은 무엇입니까?

CSS 클래스를 "NG-Repeat"지침과 연결하여 "NG-Repeat"와 함께 AngularJS 애니메이션을 사용할 수 있습니다. 'NG-Repeat'목록에 항목이 추가되거나 제거되면 AngularJS는 관련 CSS 클래스를 자동으로 추가하고 제거하여 해당 애니메이션을 트리거합니다. 예를 들어, "NG-Enter"및 "NG-Leave"클래스를 사용하여 프로젝트가 목록에 추가되거나 제거 될 때 프로젝트를 애니메이션 할 수 있습니다.

"ng-switch"와 함께 Angularjs 애니메이션을 사용할 수 있습니까?

예, "ng-switch"와 함께 Angularjs 애니메이션을 사용할 수 있습니다. "NG-REPEAT"와 유사하게 CSS 클래스를 "NG-Switch"지침과 연결하여 애니메이션을 만들 수 있습니다. "NG-Switch"조건이 변경되면 AngularJS는 관련 CSS 클래스를 자동으로 추가하고 삭제하여 해당 애니메이션을 트리거합니다.

"ng-view"와 함께 AngularJs 애니메이션을 사용하는 방법은 무엇입니까?

CSS 클래스를 "NG-View"지시문과 연결하여 "NG-View"와 함께 AngularJS 애니메이션을 사용할 수 있습니다. 보기가 변경되면 AngularJS는 관련 CSS 클래스를 자동으로 추가하고 삭제하여 해당 애니메이션을 트리거합니다. 이것은 AngularJS 응용 프로그램에서 페이지 전환 애니메이션을 만드는 데 사용될 수 있습니다.

사용자 정의 지시문과 함께 AngularJS 애니메이션을 사용할 수 있습니까?

예, 맞춤형 지침과 함께 AngularJS 애니메이션을 사용할 수 있습니다. 지침의 링크 기능에서 "$ animate"서비스를 사용하면 CSS 클래스를 프로그래밍 방식으로 추가, 삭제 및 쿼리하여 JavaScript를 사용하여 복잡한 애니메이션을 만들 수 있습니다.

AngularJS 애니메이션을 디버그하는 방법?

브라우저 개발자 도구를 사용하여 AngularJS 애니메이션을 디버그 할 수 있습니다. DOM의 애니메이션 요소를 확인하면 AngularJS가 추가 및 제거하는 CSS 클래스를 확인할 수 있습니다. 또한 "$ animate"서비스의 "활성화 된"메소드를 사용하여 애니메이션을 활성화 또는 비활성화 할 수 있으며, 이는 디버깅에 매우 유용합니다.

위 내용은 AngularJS 응용 프로그램의 JavaScript 애니메이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!