AngularJS team recently added the very expected animation feature to their framework. You can have a great overview with the Miško Hevery introduction video and a complete overview article at the great Year of Moo blog.
From now (AngularJS 1.1.4), you can easily animate any directive, just by adding an
ng-animate attribute and defining the animation CSS class.
UPDATE : AngularJS team fixed the following problem in the last 1.1.5 release. The ng-animate will now be evaulated on each animation, Yahoo :)
UPDATE : Just created an much more simpler example based on AngularJS 1.2; check it out : http://embed.plnkr.co/p7WZdsy0FznV3zo7VWjU/
As a mobile web developer, the first thing that come to mind is animating your mobile applications views. Its quite easy to add slide-in effects with the current routing system :
As you can see, the code is very simple code and the animation is always the same (appear from right). But typically, if you open a screen in your mobile application, and there is a ‘Back’ button, the user expects the slide animation to be reversed when he touches it. If you don’t do this, you expose your users to an unexpected behaviour, and an akward #WTF moment.
With the actual AngularJS implementation, there is a problem with the
ng-view directive, which is heavily used for the AngularJS routing : it doesn’t handle dynamic
ng-animate directive at all, despite what says the doc. You can only set the enter and leave animation once, because these are set at linking time in case of the ng-view. And thus, you can only have one pre-defined enter and leave animation for your application view and for the whole application lifecycle.
But an easy workaround to achieve this is to act on the enter and leave CSS classes themselves directly. Instead of changing the CSS classes names at the DOM level, one could update the CSS classes definitions to achieve the same result without even touching the DOM. The ng-view directive still has the same enter and leave CSS classes names and instead we change theses classes definition, and thus the animation direction.
There are several ways to do this. We could dynamically add a stylesheet to the document, or change the stylesheet source using
ng-src attribute but this wouldn’t be very efficient due to multiple downloads of the ressource.
Here’s how we’ve done bi-directionnal animations for the ng-view. Note the usage of the
ng-bind-html-unsafe that take cares of not escaping the CSS output and the use of
transform CSS properties to force the use of GPU and improve the animation smoothness, especially on mobile devices.
Another clever solution, as pointed out by Andrej in the comments below, is to simply wrap the
ng-view in another div that have a dynamic class name, which could change when we need to change the animation direction, like
RL. This way we just need to update that classname and the CSS will pick the good one.
1 2 3 4