Angularjs ng-animate different approaches - angularjs

Question

I'm following angular docs about animations and the approach is like that:
html
<div ngview class="animate">
css
.animate.ng-enter{
...
}
.animate.ng-leave{
...
}
But following this page, the aproach for the same case is something like that:
html
<div ngview ng-animate="'animate'">
css
.animate-enter{
...
}
.animate-leave{
...
}
I would to know the difference about these two approaches, about "best practice", performance and everything...

Answer 1

From what I understand the second page you have listed is just a wrapper for ngAnimation into a directive. I am not even sure if this is official and if is kept up to date with latest angular releases (especially 1.2).
Update: ngAnimate reading through the page on yearofmoo I found this that I think answers your question:
> One of the major reasons why the ngAnimate directive was removed was
because it was difficult to integrate 3rd-party CSS animation
libraries into your code. A good example is with the animate.css
library, which, to make it work with ngAnimate, you would have to
hardcode the combination of CSS classes into the ngAnimate attribute
for each event that takes place. This would be much easier with a
driver or module that you load into your application and boom things
are working.
I think you should be more concerned on where you would like to write your animations (eg CSS3 vs JS) and go with the mainstream way.
You can find a good up to date guide on yearofmoo explaining the different approaches.
You can also watch egghead.io lessons 48-50

Answer 2

Using the directive ng-animate is deprecated: the best practice is that all animations are done by adding classes to elements, as in your first example and link to the Angular docs. A fairly comprehensive guide is available at Year of Moo.
One point to make is that you can still use this to use custom animations defined in javascript. See the Year of Moo article for more information, but they start off as:
myApp.animation('.animate',....
This would be used in cases where you need to support older IE (that doesn't support various CSS transitions/animations), you might want to use a transition from an existing Javascript library, or you might have something very simple Javascript behaviour that still should be treated like an animation (say, adding a class for a few seconds, and then removing it). It's actually a fairly powerful method that allows you to (ab)use Javascript for visual niceties, but keeps it extremely separate from any other logic.

Answer 3

There are three approaches to create animation, css transition, keyframe and JS animation. each has their own pros and cons. You can read this nice article for a comprehensive understandings.
Remastered Animation in AngularJS 1.2 - yearofmoo.com : http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html