Animation in AngularJS

#1

Post by gsklee » Tue, Jun 25, 2013, 4:17 PM UTC

Re: Animation in AngularJS

#2

Post by ok_craig » Tue, Jun 25, 2013, 5:12 PM UTC

I'm excited there's going to be an ngAnimate for animations in AngularJS, but I feel compelled to comment mostly to say that this presentation is awesomely done. Good job.

Re: Animation in AngularJS

#3

Post by kailuowang » Tue, Jun 25, 2013, 5:25 PM UTC

With ng-animate, angular completes the circle of defining HTML DOM behavior in a pure declarative way. I can't wait for this to go to the stable branch.

Re: Animation in AngularJS

#4

Post by randallu » Tue, Jun 25, 2013, 5:39 PM UTC

Saying "Animation in jQuery relies on CPU and Memory" is silly if you use translateZ(0) to create a composited layer which uses a tremendous amount more memory.

WebKit at least will create a composited layer for the duration of a transition/animation all by itself -- if you do choose to use translateZ(0) everywhere, understand that it consumes texture memory the whole time the element is in the DOM (and not display:none) and maybe has a backing store in heap as well. So if you want your page to not crash Mobile Safari on older Apple devices then use it judiciously.

Re: Animation in AngularJS

#5

Post by webo » Tue, Jun 25, 2013, 5:52 PM UTC

I haven't seen slid.es before. This is awesome.

Re: Animation in AngularJS

#6

Post by gbadman » Tue, Jun 25, 2013, 5:59 PM UTC

PSA: Hit the 'eye' icon on the right, 'Run' on the top or CTRL/CMD-ENTER to toggle the preview pane in the demos.

Re: Animation in AngularJS

#7

Post by at-fates-hands » Tue, Jun 25, 2013, 6:00 PM UTC

kailuowang wrote: post #3

With ng-animate, angular completes the circle of defining HTML DOM behavior in a pure declarative way. I can't wait for this to go to the stable branch.

Agreed.

I'm just wondering how long it will take to get people to convert to this way of thinking.

Re: Animation in AngularJS

#8

Post by lenkite » Tue, Jun 25, 2013, 6:05 PM UTC

Ok, I am lost, but all I see is the definition of .fade CSS class using the transition/transform properties - not sure what this has to do with angularjs.

Re: Animation in AngularJS

#9

Post by gbadman » Tue, Jun 25, 2013, 6:06 PM UTC

kailuowang wrote: post #3

With ng-animate, angular completes the circle of defining HTML DOM behavior in a pure declarative way. I can't wait for this to go to the stable branch.

I think that the addition of support for keyframe-based animations in 1.1.5 is really the killer feature.

This will allow for drop-in animations (like animate.css, mentioned in the deck) in the same sort of way that bootstrap allowed for drop-in styles.

Re: Animation in AngularJS

#10

Post by CountHackulus » Tue, Jun 25, 2013, 6:10 PM UTC

Yup, CSS animations are easier to both write and use, and are super fast. Except on iOS6+ where a long-standing bug has made them nearly unusably slow.