Animate wrapper of dynamic div with dynamic content - no fixed height

Question

I'm new to angular and am building a project with it. I have set up all the views/routes correctly and am now trying to 'prettify' the transitions between the views. A lot of demos I've seen are working with absolute positioned elements, which makes for an easy transition.

My content will always be dynamic. Can someone assist me to make the height of the wrapper transition smoothly as well as the fade. The fade is working as intended

http://plnkr.co/edit/KlVfqCxQIE4VBwatuLgc?p=preview

Answer 1

with markup like this

  <div class="wrapper">
    <div class="wrapper-inner">
      {CONTENT}
    </div>
  </div>

You could watch the wrapper-inner height changes and set the height of the wrapper

scope.$watch(
    function() {

        return innerElement[0].offsetHeight;
    },
    function(value, oldValue) {

        element.css('height', value+'px');

}, true);

Then with a css transition animate the change in height

.wrapper {
  overflow: hidden;
  transition: height ease .3s;
}

here is a plunker http://plnkr.co/edit/IiR228W9Z9JFkvdvhVZp