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

发布时间：2020-12-17 08:30:29 所属栏目：安全来源：网络整理

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

我创建了一个表，用户可以在其中增加和减少该值。
见 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元素操作。
>在1.2版本的AngularJS中，您需要参考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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!