javascript - 添加行时为表格设置动画

Question

我目前有以下一段 Angular 代码:

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-defined Animations 部分

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