17

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.

isherwood
  • 58,414
  • 16
  • 114
  • 157
Hoser
  • 4,974
  • 9
  • 45
  • 66
  • 3
    This is the best article on AngularJS animation. It will show you everything you need to know. http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html – jessegavin Jan 15 '14 at 17:35
  • 3
    The word 'height' appears nowhere in that article (which I had already read). – isherwood Nov 19 '14 at 19:14

1 Answers1

25

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.

Sycomor
  • 1,272
  • 11
  • 15
  • 19
    Is there anyway to do this for an element of unknown height? (i.e. `height:auto;`) – Trevor Jun 29 '15 at 18:21
  • 2
    @threed you can use `max-height` instead. Taken from this answer: http://stackoverflow.com/a/8331169/2247854 – eden_lane Dec 03 '15 at 15:58