angularjs에서 ng-module을 사용한 애니메이션 사용 방법

angularjs에서 ng-module을 사용한 애니메이션 사용 방법

ng-repeat을 사용하여 반복하는 목록이 있습니다.사용자는 위 화살표 및 아래 화살표 아이콘을 사용하여 목록 항목과 상호 작용할 수 있습니다.이것들을 클릭하면 "목록"에서 요소의 순서를 변경할 수 있습니다.이것은 각도가 모델을 변경하는 것을 제안하고 변경 내용이 자동으로 뷰에 반영됩니다.

<div ng-repeat="item in list">
{{item.name}} 
<div class="icon-up-arrow" ng-click="moveUp($index);"></div> 
<div class="icon-down-arrow" ng-click="moveDown($index);"></div>
</div>

moveUp 로직:-

$scope.moveUp= function(position){
 var temp=list[position-1];
 list[position-1]=list[position];
 list[position=temp];
};

위의 코드는 완벽하게 작동하며 아이템을 아래로 이동시키는 논리와 유사합니다.하지만 내가 해결하고 싶은 문제는 애니메이션을 어떻게 표현하느냐는 것이다.앵글은 바인딩 뷰와 모델을 알아서 처리하지만, 아래 화살표 아이콘을 누르면 뷰가 업데이트되므로 애니메이션을 넣을 수 있는 방법은 없습니까?

Marcel의 코멘트에 따라: AngularJS 1.2에서는ng-animate지시.대신:

1. 포함하다angular-animate[-min].js.
2. 모듈을 다음 항목에 의존시킵니다.ngAnimate.
3. 및 등의 클래스를 사용하여 CSS에서 천이를 정의합니다.
4. 사용하다ng-repeat평소처럼요

HTML:

<div ng-app="foo">
    <!-- Set up controllers etc, and then: -->
    <ul>
        <li ng-repeat="item in items">{{item}}</li>
    </ul>

JavaScript:

angular.module('foo', ['ngAnimate']);
// controllers not shown

CSS:

li {
    opacity: 1;
}
li.ng-enter {
    -webkit-transition: 1s;
    transition: 1s;
    opacity: 0;
}
li.ng-enter-active {
    opacity: 1;
}

(다른 사람의) 플런커에서 데모합니다.

다양한 CSS 클래스에서의 진행에 대한 자세한 내용은 $animate 문서를 참조하십시오.

이 링크를 체크합니다.http://www.nganimate.org/

1. dom을 변경하는 다른 디렉티브가 있는 요소에 ng-animate 속성을 선언해야 합니다.

   div ng-repeat="item in itens" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}"
   

2. css 트랜지션 또는 애니메이션을 추가해야 합니다.

   .animate-enter {
      -webkit-transition: 1s linear all; /* Chrome */
      transition: 1s linear all;
      opacity: 0;
   }
   .animate-enter.animate-enter-active {
      opacity: 1;
   }
   

plnkr의 예는 http://plnkr.co/edit/VfWsyg9d7xROoiW9HHRM 에서 확인할 수 있습니다.

마지막 답변을 보완하기 위해 순서가 변경될 때 애니메이션에 대한 ng-move 클래스가 있습니다.

li {
    opacity: 1;
}
li.ng-move {
    -webkit-transition: 1s;
    transition: 1s;
    opacity: 0;
}
li.ng-move-active {
    opacity: 1;
}

마지막 문서입니다.

플러그인 수를 줄이기 위해 'ngAnimate' 모듈을 사용하지 않으려면 ng-init 및 커스텀 디렉티브를 사용하여 간단한 전환 효과를 아카이브할 수 있습니다.

<li ng-repeat="item in items" class="item" item-init>{{item.name}}</li>

.item{
    opacity:0;

   -webkit-transition: all linear 300ms;
   transition: all linear 300ms;
}
.item.visible{
    opacity:1;
}


myApp.directive('itemInit', function ($compile) {
    return function (scope, element, attrs) {
        scope.initItem(element);
    };
});

인유 컨트롤러

$scope.initItem = function(el){
    $timeout(function(){
        angular.element(el).addClass('visible');
    },0);
}

언급URL : https://stackoverflow.com/questions/20580599/how-to-use-animation-with-ng-repeat-in-angularjs