分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了angularjs – ng-animate：模型更改时的动画，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我创建了一个表，用户可以在其中增加和减少该值。 @H_675_1@见 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;
}

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

因此，当您单击任何perticular列中的向上箭头或向下箭头时，表格列的背景颜色从红色更改为白色。

我不能让我的头围绕它。任何指针如何实现呢？

在你的代码有几个问题：

>不要在控制器的代码中做DOM操作：$(elem).animate(..是你应该避免的东西，只有在指令中，你可以用DOM元素操作。@H_675_1@>在1.2版本的AngularJS中，您需要参考ngAnimate模块。@H_675_1@>最好做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);});
          });
        }
      });
   };
});