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

Anthony Johnston · Accepted Answer · 2014-11-18 17:47:19Z

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

answered Nov 18, 2014 at 17:47

Anthony Johnston

9,6544 gold badges49 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related