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.
Share Improve this question edited Apr 7, 2014 at 18:33 Alaeddine 1,6972 gold badges26 silver badges48 bronze badges asked Apr 7, 2014 at 18:29 imrichardcoleimrichardcole 4,6954 gold badges26 silver badges49 bronze badges 5- 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
Reset to default 4if 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