NG-动画：动画时模型更改

问题描述：

我创建了一个表，其中用户可以增加或减少的值。
请参阅小提琴

I have created a table in which user can increase and decrease the value. See the Fiddle

//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;
}

我想要做动画时，模型更新即在背景颜色表列的变化从红到白的情况下，用户更改值。

I want to do animation when the model updates i.e the table column changes in background color From Red to white in case user changes the value.

所以，当您单击向上或向下箭头做过任何列，从红到白表列的背景颜色。

So when you click up arrow or down arrow in any perticular column, the background color of that table column changes from Red to white.

我不能让我的头周围。就如何实现这一目标的任何指针？

I am not able to get my head around it. Any pointers on how to achieve this ?

答

有几个问题在code：

There are couple of issues in your code:

的从不的做DOM操作的控制器code： $（ELEM）.animate（.. 的东西你应该避免的。只有在指令你可以与DOM元素处理。

NEVER do DOM manipulations in the code of controller: $(elem).animate(.. is something you should avoid. Only in directives you can manipulate with DOM element.

在1.2+版本AnulgarJS你需要引用 ngAnimate 模块。

In 1.2+ versions of AnulgarJS you need to reference ngAnimate module.

这是更好地做CSS3动画回退到基于JS的动画。

It is better to do CSS3 animations with fallback to js-based animations.

我建议写一个指令，将跟踪更改，并添加类，将触发动画，然后将其删除：

I propose to write a directive that will track changes and add class that will trigger animation and then remove it:

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);});
          });
        }
      });
   };
});

工作exampple：
http://plnkr.co/edit/zs495osfSnWSvWBIn3rh?p=$p$pview

Working exampple: http://plnkr.co/edit/zs495osfSnWSvWBIn3rh?p=preview

NG-动画：动画时模型更改

相关推荐