Horizontal collapse does not animate on first expand

[rizoom]

Bug description:

Horizontal collapse: If an element is initially collapsed, the first expand does not animate.
It works well for vertical collapse.

Link to minimally-working plunker that reproduces the issue:

http://plnkr.co/edit/iVN0bWeKUCjRdjzTHZKy?p=preview
the divs are initially collapsed, clicking on the buttons allow to expand/collapse them. The horizontal one will not animate on the first expand.

Working plunker (dirty fix):
http://plnkr.co/edit/8Q0uRsyByKSsg3IEFOTZ?p=preview

init function of uibCollapse directive has been changed to:

        function init() {
          horizontal = !!('horizontal' in attrs);
          if (horizontal) {
            css = {
              width: 'auto',
              height: 'inherit'
            };
            cssTo = {width: '0'};
          } else {
            css = {
              width: 'inherit',
              height: 'auto'
            };
            cssTo = {height: '0'};
          }
          // changes here
          var collapsed = scope.$eval(attrs.uibCollapse);
          if (!collapsed ) {
            element.addClass('in')
          }
            element
              .addClass('collapse')
              .attr('aria-expanded', !collapsed )
              .attr('aria-hidden', collapsed )
              .css(css);
        }

Version of Angular, UIBS, and Bootstrap

Angular: 1.5.3
UIBS: 1.3.3 + horizontal collapse patch (see PR #6010)
Bootstrap: 3.3.6

[icfantv]

@rizoom thanks for reporting this and for doing some initial investigation. We'll take a look.

[wesleycho]

I want to say that is intentional.

[rizoom]

@wesleycho
Do you mean that component cannot be initialized in a collapsed state, or that the animation should not run the first expand animation if initially collapsed?

Ok if you say that components initially collapsed are not supported, but for the second case, vertical and horizontal cases are inconsistent, because as stated above, the vertical one does animate (see first plunker).

[wesleycho]

Ah, I see the Plunker - this is a bug for sure.

[wesleycho]

I investigated this more carefully, and this turns out to not be a bug, but a documentation issue - see this Plunker to see it working. This is specifically an issue with how CSS flows in a container, and how the horizontal collapse goes from 0px to the full size, which causes a change in the height of the container.

This is addressed in #6183.