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.
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');
}
});
});
ng-enter is automatically added by angular, will this prevent that on load?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;
}
If you only need to avoid animation when the list is first loaded, you could disable $animate service and enable it again after the first digest:
app.controller("yourController",function($scope,$animate,$timeout){
$scope.listData = []; //your code to populate the list data
$animate.enabled(false); //disable animation on page load
$timeout(function () {
$animate.enabled(true); //enable animation again after the first digest.
});
});
If you load your listData via $http service, ensure that you move the code to inside the success function.
The code above disable the animation globally, if this is not what you want, you could disable and enable for a specific element: disable nganimate for some elements
Here's what I know(nearly exactly the same as Khanh)
app.controller("Controller",function($scope,$animate,$timeout){
$scope.listData = [];
$animate.enabled("false");
$timeout(function () {
$animate.enabled("true");
});
});
