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.

Please supply a plunker or jsfiddle, would make it easier to understand the specific implementation. — Ronni Skansing, May 10 '14 at 10:21

score 2 · Answer 1 · answered May 14 '14 at 18:55

2

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');
        }
    });
});

answered May 14 '14 at 18:55

Govan

7,751
5
26
42

`ng-enter` is automatically added by angular, will this prevent that on load? – Khanh TO May 17 '14 at 02:17

score 1 · Answer 2 · edited May 23 '17 at 11:50

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

score 1 · Accepted Answer · answered May 15 '14 at 15:04

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;
}

score 0 · Answer 4 · answered May 11 '14 at 04:29

0

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");


});

});

answered May 11 '14 at 04:29

MrARM

25
7

this answer is only different from my answer by replacing `true` with `"true"` and `false` with `"false"`. Unfortunately, this won't work as `"true"` and `"false"` are not empty strings and both will be evaluated to `true` in javascript. – Khanh TO May 12 '14 at 13:25
@Khanh TO Didn't know, been coding with "" – MrARM May 13 '14 at 15:32

angularjs with animate.css on specified event only?

4 Answers4