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

前端之家收集整理的这篇文章主要介绍了angularjs – ng-animate:模型更改时的动画前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我创建了一个表,用户可以在其中增加和减少该值。
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

猜你在找的Angularjs相关文章