CODEWITHSUNDEEP
cssangularjscss-transitionsangularjs-ng-repeatng-animate
EnigmaRM
EnigmaRM

Reputation: 7632

ng-animate in ng-repeat not working

I was tasked with creating a cascading effect for a list of items (each one comes in a fraction of a second later than the other). So you can imagine how excited I was when I discovered ng-animate. I already populated my list with ng-repeat, so it seemed as simple as adding that & modifying the CSS. This is what I'm shooting for: How to delay ngAnimate in ngRepeat

But it doesn't seem to actually function. Any ideas? Here's my fiddle example: fiddle ng-animate.

html

<ul class="results-nav">
     <li class="" ng-animate="'animate'" ng-repeat="domain in resultsNav.domain" ng-click="scrollTo(domain.id)">{{domain.title}}</li>
</ul>

css

.animate-enter {
    -webkit-transition: 1s linear all; /* Chrome */
    transition: 1s linear all;
    opacity: 0;
}

.animate-enter.animate-enter-active {
    opacity: 1;
}

As you can see in my fiddle, it doesn't do anything on run.

Upvotes: 1

Views: 2297

Answers (2)

Theo
Theo

Reputation: 1261

Have you added the script and ngAnimate to your app as a dependency?

For the cascading effect you want to use the 'Stagger' functionality which will delay the execution of the animation between each row.

I created the simple css library ngAnimate.css that might be able to help you. All you need to do is include the stylesheet and then add the relevant classes.

Hope it helps

Upvotes: 1

Derek Ekins
Derek Ekins

Reputation: 11391

Your fiddle is using angular stable but animations are only available on unstable.

I've not much experience with them, but I did manage to get them going by incremently adding items to the collection. This is not a great solution but hopefully it will get you started. I am sure there will be a way to do this with a custom animation or something similar.

You can view my shot at this here.

Upvotes: 1

Related Questions