是否可以为 ng-grid 中更改的单元格值设置动画？答案

【问题标题】：Is it possible to animate cell values changing in ng-grid?是否可以为 ng-grid 中更改的单元格值设置动画？
【发布时间】：2014-06-07 11:35:32
【问题描述】：

我设置了一个网格来显示一些输入值和计算值。

所有单元格都使用基于最新默认模板的自定义模板，该模板仅更改可编辑单元格的颜色：

<div class="ngCellText"
     ng-class="col.colIndex() + (col.enableCellEdit ? ' blueCel' : '')"
     style="text-align:right"
     title="{{COL_FIELD}}">
  <span ng-cell-text>{{COL_FIELD CUSTOM_FILTERS}}</span>
</div>

看起来像这样：

接下来，我的任务是添加一个轻微的动画，例如每当值发生变化时，单元格背景会闪烁绿色然后变回白色。我对角度相当陌生，所以我不确定从哪里开始。我见过的使用 ng-animate（列表添加/删除、元素显示/隐藏等）的示例似乎都不能很好地转化为这种情况。

有人能指出我正确的方向吗，也许是一个 div 或 span 动画以响应其内部 HTML 变化的示例？

【问题讨论】：

标签： angularjs animation ng-grid ng-animate

【解决方案1】：

你要做的是一个指令。该指令将需要简单地为您要闪烁的项目分配一个值，并且将观察自己的值是否发生变化。您可以使用 CSS 来制作动画，并且 Angular 处理 CSS 的方式非常巧妙。你可以像这样创建指令......

module.directive('customDirective', ['$compile', function($compile,) {
    return {
        transclude: true,
        scope: {
            resource: '='
        },
        link: function(scope, element, attrs){
            //All the logic for assigning the value here.
            scope.flash = true;

        }
    });

接下来，您将要创建一个可以插入此指令的模板。

<div custom-directive ng-show="flash" class="fadein fadeout" resource="row.getProperty(\'resource\')"></div>

像这样在网格中使用该模板

$scope.gridOptions = { 

    data: 'dataFromService',

    columnDefs: [{field:'column', displayName:'Some Column', cellTemplate:
        '<div custom-directive ng-show="flash" class="fadein fadeout"resource="row.getProperty(\'resource\')"></div>'}
                 ],
    }

这里更重要的部分是类添加（淡入和淡出）最后是 CSS 将完成大部分工作。

fadein.ng-hide-remove,
.fadeout.ng-hide-add {
    -webkit-transition: 400ms ease-in-out all;
    -moz-transition: 400ms ease-in-out all;
    -o-transition: 400ms ease-in-out all;
    transition: 400ms ease-in-out all;
    display: block !important;
}

.fadein.ng-hide-remove,
.fadeout.ng-hide-add.ng-hide-add-active {
    opacity: 0;
}

.fadeout.ng-hide-add,
.fadein.ng-hide-remove.ng-hide-remove-active {
    opacity: 1;
}

虽然这并不完全是您需要的 CSS，但它会为您提供所需的基本设置。此代码来自一个闪烁的保存按钮，该按钮仅在有人保存资源时出现。

【讨论】：