Question

我目前有以下角度代码：

function MyController($scope) {
    var items = [];
        $scope.addRow = function () {
        items.push({ value: 'Hello, world!' });
        $scope.items = items;
    }
}

以下是html片段：

<table ng-controller="MyController">
    <tr ng-repeat="item in items">
        <td>
            {{item.value}}
        </td>
    </tr>
    <tr>
        <td>
            <button ng-click="addRow()">Add row</button>
        </td>
    </tr>
</table>

正如预期的那样，每次点击Add Row时，都会添加一行新文字Hello, World!。

如何延长这一点，以便新添加的行在短暂的瞬间显示或闪烁？我的想法是，在真正的应用程序中，项目将动态添加，而无需单击按钮，因此我想吸引用户注意新添加的项目。

Answer 1

如果包含ng-animate模块，则可以使用css类（ngAnimate页面还显示如何在javascript中使用）

的 http://docs.angularjs.org/api/ngAnimate 的

<tr ng-repeat="item in items" class="slide"> <td> {{item.value}} </td> </tr> <style type="text/css"> .slide.ng-enter, .slide.ng-leave { -webkit-transition:0.5s linear all; transition:0.5s linear all; } .slide.ng-enter { } /* starting animations for enter */ .slide.ng-enter-active { } /* terminal animations for enter */ .slide.ng-leave { } /* starting animations for leave */ .slide.ng-leave-active { } /* terminal animations for leave */ </style>
<。>在.ng-enter，.ng-leave类中，您可以指定要设置动画的属性，例如不透明度，宽度，高度等。

要从javascript触发动画，请查找ngAnimate页面的 JavaScript定义的动画 部分

有关动画示例，请参阅http://www.nganimate.org

Answer 2

我不是一个伟大的角度开发者，但我认为你需要使用ngAnimate指令，然后使用css过渡，here是一个来自官方文档的例子

添加Animate表作为行

2 个答案: