How to animate a div height change with AngularJS

Question

I have a div which contains article titles from an RSS feed. This makes the div size dynamic depending on which feed is being looked at, length of article titles, etc. I would like to make the change in div height be a smooth animation like you see here, except using angularJS instead of jQuery.

The only animation I've done with Angular is just a fade-in fade-out text type stuff using

ng-enter{opacity:0;} ng-enter-active{opacity:1;}

Which was fairly simple, so hopefully this will be as well.

Answer 1

Simple example, based on ngAnimate innate monitoring of adding and removing classes. Define 3 css classes :

.transformable {
    -webkit-transition: height 100ms linear;
    -moz-transition: height 100ms linear;
    -o-transition: height 100ms linear;
    -ms-transition: height 100ms linear;
    transition: height 100ms linear;

}

.small {
    height:100px;
}

.big {
    height:300px;
}

and declare your div :

<div class="transformable" ng-class="{'small':isSmall, 'big':!isSmall}" ng-click="isSmall = !isSmall"> </div>

This should give you size-changing div on click : angular detects addition/removal of small/big classes and activates animation based on transformable css class values. You can do similar things with other animation-ready directives (e.g. ng-repeat) or create your custom behaviours. The article from jessegavin seems like a good primer on this.