최고의 AngularJS와 애니메이션 튜토리얼 2024년, 이 튜토리얼에서는 애니메이션은 무엇입니까?,ngAnimate 완료?,CSS 애니메이션을 사용하여,CSS 전환,CSS 애니메이션,를 배울 수 있습니다.
AngularJS와 애니메이션을 제공합니다, 당신은 CSS 사용하실 수 있습니다.
AngularJS와 애니메이션은 각-animate.min.js 라이브러리를 도입 할 필요가있다.
<script src="http://cdn.static.w3write.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
그것은 응용 프로그램 모델 ngAnimate 사용되어야한다 :
<body ng-app="ngAnimate">
애니메이션 생성 된 HTML 요소를 변경하여 동적 효과이다.
DIV를 숨기려면 확인란을 선택합니다 :
애니메이션 응용 프로그램은 너무 많이하지만, 애니메이션의 적절한 사용은 페이지의 풍요 로움을 증가하거나 사용자가보다 쉽게 이해하도록 할 수 있습니다. |
우리는 응용 프로그램의 이름이 설정되어 적용 할 경우, 당신은 ngAnimate 모델에 직접 추가 넣을 수 있습니다 :
ngAnimate 모델을 추가하거나 클래스를 제거 할 수 있습니다.
ngAnimate 모델은 애니메이션의 HTML 요소를하지 않지만, 이벤트가 ngAnimate이 HTML 요소에 애니메이션을 미리 정의 된 클래스를 사용합니다 발생하는 경우 ngAnimate는 숨겨진 표시 HTML 요소 유사한 이벤트를 모니터링합니다.
AngularJS와 추가 / 클래스 명령을 제거 :
ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
ng-if
ng-switch
ng-show
와 ng-hide
추가 또는 제거 명령 ng-hide
클래스의 값입니다.
다른 설명은 DOM에 추가됩니다 ng-enter
클래스, DOM이 추가됩니다 제거 ng-leave
속성을.
되는 HTML 요소의 위치 변경, 때 ng-repeat
명령은 추가 할 수 있습니다 ng-move
유형입니다.
또한, 완료 후, HTML 요소의 클래스 컬렉션이 삭제됩니다. 예를 들어 : ng-hide
명령은 클래스에 대해 추가합니다 :
ng-animate
ng-hide-animate
ng-hide-add
(요소가 숨겨져있을 경우) ng-hide-remove
(요소가 표시되는 경우) ng-hide-add-active
(요소가 숨겨져있는 경우) ng-hide-remove-active
(요소가 표시되는 경우) 우리는 CSS 전환 (전환) 또는 HTML 요소를 애니메이션 CSS 애니메이션을 사용할 수 있습니다, 일부 당신은 우리의 볼 수있는 CSS 전환 튜토리얼 , CSS 애니메이션 튜토리얼 .
CSS는 우리에게 다른 변경된 CSS 속성 값으로 원활하게 전환 할 수 있습니다 :
div 요소 세트에서 .ng-hide
클래스를 전환은 0.5 초, 100 픽셀 0까지의 높이를 취합니다
CSS 애니메이션은 CSS 속성 값을 수정 원활하게 할 수 있습니다 :
div 요소는 설정에서 .ng-hide
, -time 클래스를 myChange
가 100 픽셀에서 0으로 부드러운 높이가 될 것입니다, 애니메이션이 실행됩니다