ng-animate : 模型改变时的动画 [英] ng-animate : Animation when model changes

问题描述

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

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 ?

推荐答案

您的代码中有几个问题:

There are couple of issues in your code:

1. NEVER 在控制器代码中做 DOM 操作:$(elem).animate(.. 是你应该避免的.只有在指令中你可以使用 DOM 元素进行操作.

1. 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+ 版本的 AngularJS 中，您需要引用 ngAnimate 模块.

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

最好使用基于 js 的动画制作 CSS3 动画.

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 a class that will trigger the 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);});
          });
        }
      });
   };
});

工作示例:http://plnkr.co/edit/zs495osfSnWSvWBIn3rh?p=preview

这篇关于ng-animate : 模型改变时的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！