ng-animate：模型更改时的动画

一尘不染

ng-animate：模型更改时的动画

angularjs

我创建了一个表，用户可以在其中增加和减少该值。见小提琴

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

我想在模型更新时做动画，即表格列的背景颜色从红色更改为白色，以防用户更改值。

因此，当您单击任何垂直列中的向上箭头或向下箭头时，该表列的背景颜色将从红色变为白色。

我无法解决这个问题。关于如何实现这一目标的任何指针？

阅读 252

2020-07-04

共1个答案

一尘不染

您的代码中有几个问题：

切勿在控制器代码中进行DOM操作：这$(elem).animate(..是您应避免的事情。只有在指令中，您才能使用DOM元素进行操作。
在AngularJS的1.2+版本中，您需要引用ngAnimate模块。
最好将CSS3动画与基于js的动画一起使用。

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

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

2020-07-04