ng-animate : 모델 변경 시 애니메이션

ng-animate : 모델 변경 시 애니메이션

사용자가 값을 높이거나 낮출 수 있는 테이블을 만들었습니다.바이올린을 보다

//sample code as its not allowing me to push the link to JSFiddle with out pasting code

   <tr ng-repeat="d in dataSource" ng-animate="'animate'">

// css - as from angular page
.animate-enter {
    -webkit-transition: 1s linear all; /* Chrome */
    transition: 1s linear all;
    background-color:Yellow;
}

.animate-enter.animate-enter-active {
    background-color:Red;
}

사용자가 값을 변경할 경우에 대비하여 모델이 업데이트될 때, 즉 테이블 열이 배경색에서 빨간색에서 흰색으로 변경될 때 애니메이션을 수행하려고 합니다.

따라서 주변 열에서 위쪽 화살표 또는 아래쪽 화살표를 클릭하면 해당 테이블 열의 배경색이 빨간색에서 흰색으로 변경됩니다.

나는 그것을 이해할 수 없다.이것을 어떻게 달성할지에 대한 조언이 있나요?

코드에는 몇 가지 문제가 있습니다.

1. 컨트롤러의 코드로 DOM 조작을 실시하지 말아 주세요.$(elem).animate(..피하는 게 좋을 것 같아요.DOM 요소를 사용하여 조작할 수 있는 것은 디렉티브뿐입니다.

2. Angular 1.2 이상 버전JS를 참조해야 합니다.ngAnimate모듈.

3. JS 기반 애니메이션으로 폴백하여 CSS3 애니메이션을 수행하는 것이 좋습니다.

변경 내용을 추적하고 애니메이션을 트리거하는 클래스를 추가한 후 제거할 지시문을 작성할 것을 제안합니다.

app.directive('animateOnChange', function($animate,$timeout) {
  return function(scope, elem, attr) {
      scope.$watch(attr.animateOnChange, function(nv,ov) {
        if (nv!=ov) {
          var c = nv > ov?'change-up':'change';
          $animate.addClass(elem,c).then(function() {
            $timeout(function() {$animate.removeClass(elem,c);});
          });
        }
      });
   };
});

작업 예: http://plnkr.co/edit/zs495osfSnWSvWBIn3rh?p=preview

이 문제는 간단한 지시와 CSS3 애니메이션으로 해결할 수 있습니다.

HTML

<span animate-on-change="someValue">{{someValue}}</span>

지시.

myModule.directive('animateOnChange', function($timeout) {
  return function(scope, element, attr) {
    scope.$watch(attr.animateOnChange, function(nv,ov) {
      if (nv!=ov) {
        element.addClass('changed');
        $timeout(function() {
          element.removeClass('changed');
        }, 1000); // Could be enhanced to take duration as a parameter
      }
    });
  };
});

CSS

[animate-on-change] {
  transition: all 1s;
  -webkit-transition: all 1s;
}
[animate-on-change].changed {
  background-color: red;
  transition: none;
  -webkit-transition: none;
}

만지작거리다

Angular 1.5에서는 ngAnimateSwap을 directive에 내장할 수 있습니다.

문서에서:

ngAnimateSwap은 관련된 표현이 변경될 때마다 컨테이너를 제거하고 입력할 수 있는 애니메이션 지향 지시어입니다.이 지시의 일반적인 사용 예는 한 번에 하나의 이미지를 포함하는 회전 배너 또는 슬라이더 구성 요소입니다.활성 이미지가 변경되면 이전 이미지가 Leave 애니메이션을 수행하고 Enter 애니메이션을 통해 새 요소가 삽입됩니다.

언급URL : https://stackoverflow.com/questions/20053557/ng-animate-animation-when-model-changes