angularjs with animate.css on specified event only?

Question

I'd succeed implemented angularjs 1.2 animation with animate.css

.list.ng-enter{
    -webkit-animation: fadeInLeft 1s;
    -moz-animation: fadeInLeft 1s;
    -ms-animation: fadeInLeft 1s;
    animation: fadeInLeft 1s;
}

the problem with this is whenever I come back (for example from new page), the animation triggered. I want only when I add a new item in the list then the animation trigger.

Answer 1

You could use $watch in angular to add that class when listData is changed and restrict to addition of data...

app.controller('customCntr', function($scope, $element) {
    $scope.listData = [];

    $scope.$watch('listData', function(oldVal, newVal) {
        if (oldval.length === newVal.length++) {
            $element.addClass('ng-enter');
        }
    });
});

Answer 2

If I understand your question, your html shoul look like this:

<button type="button" href="url to add new record"></button>

<ul class=".list">
   <li ng-repeat="element in elements"></li>
</ul>

so when a user clicks on your button you redirect to a view where user can add a new record, after he does when you come back to all your records you just want to show the efect in the item was added, in this case that is in the last position of the list so you can just

.list:last-child.ng-enter{
  -webkit-animation: fadeInLeft 1s;
  -moz-animation: fadeInLeft 1s;
  -ms-animation: fadeInLeft 1s;
  animation: fadeInLeft 1s;
}