CODEWITHSUNDEEP
javascriptcssangularjsanimation
user3522457
user3522457

Reputation: 2963

angularjs with animate.css on specified event only?

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.

Upvotes: 3

Views: 430

Answers (4)

bto.rdz
bto.rdz

Reputation: 6720

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

Upvotes: 1

Govan
Govan

Reputation: 7781

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

Upvotes: 2

MrARM
MrARM

Reputation: 25

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


});

});


Upvotes: 0

Khanh TO
Khanh TO

Reputation: 48982

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

Upvotes: 1

Related Questions