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.

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.

• javascript
• jquery
• angularjs

• are you using/including the ng-animate module? – Patrick Evans Commented Apr 7, 2014 at 18:36
• stackoverflow./questions/1907748/… – NoWar Commented Apr 7, 2014 at 18:38
• @Clark, Those access the dom directly which you shouldn't do in angular, unless in a directive. – Patrick Evans Commented Apr 7, 2014 at 18:39
• I'm currently not using jQuery, just angular. @PatrickEvans I'm currently only using what you see above. Is ng-animate the way forward without relying on jQuery? – imrichardcole Commented Apr 7, 2014 at 18:41
• Try to check this stackoverflow./questions/22111411/… – NoWar Commented Apr 7, 2014 at 18:43

2 Answers 2

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/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

im not a great angular developer but i think you need to use the ngAnimate directive, and then use css transitions, here is an example from the oficial documentation