Quantcast
Channel: Rowboat Web » AngularJS
Viewing all articles
Browse latest Browse all 8

Fun With ngAnimate

$
0
0

A major feature in the release of AngularJS 1.1.4 is the new ngAnimate directive. It makes it easier to add animation to DOM manipulations like adding, removing or moving elements around in the DOM. The supported directives are ngRepeat, ngInclude, ngSwitch, ngHide, and ngView. You use ngAnimate by adding it as an attribute to an element that is using one of the supported directives.

Here’s an example:

That bit of markup, combined with these styles…

…form the basis of using ngAnimate to natively support animations in your AngularJS app. Basically Angular provides you with hooks for certain events that fire in the DOM. In the case of ngRepeat, you can create styles that include transitions for when an element is added to the DOM, removed from the DOM, or moved from it’s current position. I also believe that ngAnimate only supports CSS transitions, but not animations, though if I’m not mistaken you can transition a transform, so 2D and 3D effects might be possible.


Viewing all articles
Browse latest Browse all 8

Trending Articles