1

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.

Community
  • 1
  • 1
EnigmaRM
  • 7,523
  • 11
  • 46
  • 72

2 Answers2

1

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.

Derek Ekins
  • 11,215
  • 6
  • 61
  • 71
1

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

Theo
  • 1,252
  • 17
  • 23
  • When looking at your library, I get a 503 that says "Backend is unhealthy". Back when I wrote this question, we were using angular 1.1.5 or something. So I assume things will be quite different now. And probably more simple. I'd still be interested in looking at your library though. – EnigmaRM Apr 17 '14 at 17:20
  • 1
    Sorry, I missed how old this question was. Did you get that error when navigating to the website? It should be fine, maybe you caught it when I was deploying. Yes, things are easier as of 1.2 as Angular has incorporated animation in to their directives so all you need is to add the module and then define the classes. Anyway, the website should be working so feel free to take a look and let me know if you have any problems. Thanks. – Theo Apr 18 '14 at 07:36
  • Ya, seems to be good now. This is a nice implementation. I'll definitely use it. – EnigmaRM Apr 18 '14 at 16:08
  • Cool. Am glad it is helpful to you. I will try to add more animations in the near future – Theo Apr 18 '14 at 16:11