AngularJS 응용 프로그램에 CSS 애니메이션 추가

코어 포인트

AngularJS는 CSS 및 JavaScript 애니메이션을 지원하며 브라우저가 우선 순위를 줄이고 처리 스레드를 차단하지 않기 때문에 CSS 애니메이션을 사용하는 것이 좋습니다.

AngularJS에서 애니메이션을 사용하려면 라이브러리를 포함시키고 모듈을 종속성으로 추가해야합니다. 이 라이브러리는 , , , 및

와 같은 지침에 대한 애니메이션 지원을 추가합니다.

> 애니메이션은 전환 효과를 개선하고 요소 변경을 강조하고 요소 디스플레이를 제어하여 사용자 경험을 향상시킬 수 있습니다. CSS의 특정 클래스 및 속성을 사용하여 적용 할 수 있으며 고유 한 효과를 만들기 위해 사용자 정의 할 수 있습니다.

angular-animate.js AngularJS는 풍부한 웹 데이터 바인딩 응용 프로그램을 구축하도록 설계되었습니다. 애니메이션이 앱은 좋아하는 피자에 재료를 추가하는 것과 같습니다. 애니메이션은 UI를 아름답게 만들뿐만 아니라 사용자가 더 쉽게 사용할 수 있습니다. 응용 프로그램의 작은 애니메이션은 풍부함을 증가시킬 수 있으며, 이는 다른 경우에는 달성하기가 어렵습니다. ngAnimate 이제 네트워크의 힘으로 애니메이션을 만드는 방법에는 여러 가지가 있습니다. 최근까지 애니메이션은 JavaScript를 통해서만 구현되었습니다. 그러나 이제 모든 주류 브라우저는 CSS3를 지원합니다. CSS를 사용하여 웹 사이트를 애니메이션 할 수 있습니다. ng-view AngularJS 1.1.5 베타 버전은 애니메이션을 지원하기 시작합니다. AngularJS 1.2에서 기능의 안정적인 버전이 릴리스되기 전에 많은 변화를 겪었습니다. Angular Applications에서 애니메이션 지원을 추가하거나 제거하는 것은 매우 쉽습니다. 이 라이브러리는 CSS 기반 및 JavaScript 기반 애니메이션을 모두 지원합니다. 애니메이션은 JavaScript로 작성할 수 있지만 CSS 애니메이션을 권장합니다. 브라우저는 CSS 애니메이션의 우선 순위를 줄이고 스레드가 중요한 작업을 수행 할 수있을 때 스레드를 차단하지 않기 때문입니다. ng-repeat 이 기사에서는 CSS 애니메이션을 사용하여 AngularJS 내장 지시문의 동작을보다 매력적으로 만드는 방법을 배웁니다. 이 기사의 범위에는 CSS에서 지원하는 애니메이션 기능이 포함되어 있지 않습니다. 자세한 내용은 Sitepoint의 CSS 채널을 참조 할 수 있습니다. ng-show 초보자 ng-hide ng-class 애니메이션을 사용하려면 라이브러리를 포함시키고 아래와 같이 모듈의 종속성으로 모듈을 추가해야합니다.

이 라이브러리는 다음 지침에서 지정된 이벤트에 대한 애니메이션 지원을 추가합니다.

指令	事件
ng-view	enter、leave
ng-include	enter、leave
ng-switch	enter、leave
ng-if	enter、leave
ng-repeat	enter、leave、move
ng-show	add、remove
ng-hide	add、remove
ng-class	add、remove

이러한 이벤트는 지침 상태에 대한 변경이 발생할 때 자동으로 생성됩니다. 이러한 이벤트는 모듈이 응용 프로그램 모듈의 종속성으로 전달 될 때만 생성 될 것입니다. 이러한 이벤트가 발사되면 응용 요소에 CSS 클래스를 추가합니다. CSS 클래스의 해당 이름은 위 표에 언급되어 있습니다. 보시다시피, 우리는 이벤트가 발생할 때 그리고 후에 일어날 일을 자유롭게 정의 할 수 있습니다.

ngAnimate

애니메이션

사용자가 한보기에서 다른 뷰로 탐색 할 때 경로는 클라이언트에서 해결되며 페이지의 일부가 새 컨텐츠를로드합니다. 이것은 매우 빠르게 발생하며 때로는 사용자가보기 변경이 너무 갑자기 느껴질 수 있습니다. 이 단계의 애니메이션은 전환을 부드럽게합니다. ng-view 위의 표를 참조하십시오. 는보기가 변경 될 때 두 가지 이벤트를 제기 할 것입니다. 보기가 변경 될 때 다음 스타일을 적용합시다. 위의 CSS는 전환 지속 시간이 1 초로 적용된 요소로의 완화 전환을 적용합니다. 그러나, 상기 스타일만으로는 전환 중에 변경할 요소의 속성을 지정하지 않기 때문에 영향을 미치지 않습니다. 일부 CSS 속성의 값을 조작 해 봅시다 :

지금해야 할 일은 클래스를

지침에 적용하는 것입니다. ng-view

이제 한 뷰에서 다른 뷰로 탐색하면 슬라이딩 효과를 볼 수 있습니다. 전환을 적용하고 자신의 키 프레임 애니메이션을 정의 할 수도 있습니다. 데모에서 뷰 전환을 사용하여 더 나은 이해를 얻을 수 있습니다.

<code class="language-javascript">angular.module('coursesApp', ['ngAnimate']);</code>

애니메이션

<code class="language-css">.view-slide-in.ng-enter {
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;

  opacity: 0.5;
  position: relative;
  opacity: 0;
  top: 10px;
  left: 20px;
}</code>

angularjs 응용 프로그램에서 view-fade를 사용하지 않는 것은 거의 불가능합니다. 결국 모델 업데이트, 컬렉션에 항목 추가 또는 제거, 정렬 및 필터링 항목 적용과 같은이 지침의 대부분의 기능을 사용하게됩니다. 이러한 작업을 수행 할 때 지침의 항목은 지속적으로 이동 및 변경됩니다. ng-view 프로젝트의 변경 사항을보기 위해 요소의 불투명도에 선형 전환을 적용하겠습니다.

<code class="language-css">.view-slide-in.ng-enter {
  opacity: 0;
}
.view-slide-in.ng-enter.ng-enter-active {
  top: 0;
  left: 0;
  opacity: 1;
}
.view-slide-in.ng-leave.ng-leave-active {
  top: 5px;
  left: 5px;
  opacity: 1;
}
.view-slide-in.ng-leave {
  top: 0;
  left: 0;
  opacity: 0;
}</code>

이제 목록에서 무엇이든 할 때, 우리는 아이템의 혼합물과 약간의 지터 효과가 보일 것입니다. 이 효과는 위에서 생성 된

클래스에서 프로젝트의 왼쪽에서 위치 속성의 값을 변경함으로써 발생합니다. 임의의 필터링 및 정렬을 데모의 항목 목록에 적용하고 요소의 동작을 관찰하십시오.

애니메이션 ng-repeat

애니메이션은

애니메이션과 유사합니다. 유일한 차이점은 ng-repeat 및 및

클래스를 적용해야한다는 것입니다.

지시문이 표시되거나 숨길 때 프로젝트가 퇴색하거나 외출하도록합시다. 이벤트를 반전시킴으로써 동일한 애니메이션을

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

에 적용 할 수 있습니다.

ng-move 데모 에서이 애니메이션을 봅니다. 첫 페이지의 오른쪽에있는 확인란이 중복의 일부 항목을 숨기거나 보여줍니다.

결론

웹 브라우저가 점점 더 강력 해짐에 따라 고객은 이러한 기능을 최대한 활용하고 고품질 제품을 제공 할 것으로 기대합니다. CSS의 애니메이션 지원은 매우 인기있는 기능입니다. CSS와 함께 애니메이션을 작성하고 사용하는 것은 동일한 일을 수행하기 위해 몇 줄의 JavaScript 코드를 작성하는 것보다 훨씬 쉽습니다. 이 튜토리얼이 유용하고 의견을 듣기를 기대합니다.

AngularJS 응용 프로그램에서 CSS 애니메이션 추가에 대한 FAQS

(FAQ 부분은 기사가 너무 길고 의사 원리 목표와 일치하지 않기 때문에 여기서 생략됩니다. FAQ 부분의 내용은 원래 텍스트와 매우 유사하며 의사 원리가 어렵습니다. 따라서 유지 원산지 효과가 줄어 듭니다.)

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