Animate table as rows are added

Question

I currently have the following piece of angular code:

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

Along with the following snippet of 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>

As expected, each time I click Add Row a new row is added with the text Hello, World!.

How can I extend this so that the newly added row glows or flashes as it appears for a brief moment? The idea being that in the real app the item will be added dynamically without a button click so I'd like to draw the users attention to the newly added item.

Answer 1

if you include the ng-animate module you can use css classes(the ngAnimate page also shows how to use in 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>

in the .ng-enter, .ng-leave classes you would specify the attribute you would want to animate, eg opacity,width,height etc

For triggering animations from javascript look for the JavaScript-defined Animations section of the ngAnimate page

For animation examples see http://www.nganimate.org