0

I've searched for weeks on how to do this and I get how you can animate elements as they "enter" and "leave" the DOM using angular animate and generated css classes (ie. in ngRepeat). What I'm failing to understand is how to do simple event-based animations and how to "catch" their events?

So for example, how would I do the following using just angular and css?

I have two divs on the page (A and B). Both are 50px high and 50px wide, floated left so they're next to eachother. I have one ng-click directive tied to A. On click of A, it's height should transition to 80% of the window height (preferrably this should be able to be set as an attribute on the HTML element).

At the same time B should mirror the transition and eventually come to the same hight. Also.. upon completion of the transition, there should be an <h4>Transition Done</h4> injected into B.

This would be really easy to do using something like jQuery, but I'm trying to learn the "angular" way of doing things. Can someone give me a hand here?

RavenHursT
  • 2,336
  • 1
  • 25
  • 46
  • Don't have time to write a full answer but this should get you on the right track. It basically adds and removes classes when various events happen in Angular and delegates to CSS for the actual animation. http://docs.angularjs.org/api/ngAnimate/service/$animate – jraede Mar 11 '14 at 00:26
  • Yes. I get that. But what I'm not seeing is how do I "sync" the animation of B when the "trigger" for the animation is happening on A? I'm not seeing any way to "step" along the animation like I would in jQuery to make the two heights the same. – RavenHursT Mar 11 '14 at 00:33
  • make a jsfiddle of what you would do in jquery, precisely,i'll try to translate it in Angular when I have time. – mpm Mar 11 '14 at 01:47
  • @mpm, Here's a jQuery example of what I'm looking to do w/ "pure" AngularJS: http://jsfiddle.net/Troop4Christ/ZCj9H/ – RavenHursT Mar 11 '14 at 03:23

0 Answers0