添加行时为表格设置动画答案

【问题标题】：Animate table as rows are added添加行时为表格设置动画
【发布时间】：2014-05-20 03:49:45
【问题描述】：

我目前有以下一段角码：

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

连同下面的sn-p的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! 的新行。

如何扩展它以使新添加的行在短暂出现时发光或闪烁？这个想法是在真正的应用程序中，无需单击按钮即可动态添加项目，因此我想提请用户注意新添加的项目。

【问题讨论】：

你在使用/包含 ng-animate 模块吗？
stackoverflow.com/questions/1907748/…
@Clark，除非在指令中，否则那些直接访问 dom 你不应该在 Angular 中执行。
我目前没有使用 jQuery，只是有角度的。 @PatrickEvans 我目前只使用您在上面看到的内容。 ng-animate 是不依赖 jQuery 的前进方向吗？
试试看stackoverflow.com/questions/22111411/…

标签： javascript jquery angularjs

【解决方案1】：

我不是一个优秀的 Angular 开发人员，但我认为您需要使用 ngAnimate 指令，然后使用 css 过渡，here 是官方文档中的一个示例

【讨论】：

【解决方案2】：

如果包含 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

【讨论】：