Fix for collapse Animations

[bevbomb]

Bug description or feature request:

I have put together an example of using the AnimationBuilder to handle the collapse animations. by not relying on the classes from the original collapse methods from bootstrap and just using the builder to handle the start, transition and complete i was able to reproduce the collapse animations.

Plunker/StackBlitz that reproduces the issue:

StackBlitz: https://stackblitz.com/edit/ngx-bootstrap-collapse
Plunker: https://embed.plnkr.co/IdSJviSEK8X2jjxJNI0o/

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: Latest

Angular: 5.0.0

Bootstrap: 4.0.0

[evilstiefel]

This doesn't appear to be working for me either in Chrome or in Safari, even with the link you provided.

[bevbomb]

@evilstiefel I have added a Plunker link as the StackBlitz is working fine for all of my browsers

[duki994]

@bevbomb @evilstiefel

You have a bit of a problem with this directive. It can (and will) fire before child views are initialized and checked (example div with table child with *ngFor directive). Initial height will not be full element height so directive will "cut" element view in half.

It is simply fixed by adding ngAfterViewChecked() hook :)

@Directive({
  selector: '[appBsCollapse]',
})
export class CollapseAnimationDirective implements AfterViewChecked {

 ...

  public isViewChecked: boolean = false;

 ..

  ngAfterViewChecked() {
    this.isViewChecked = true;
  }

...

  /* allows to manually toggle content visibility */
  public toggle(): void {
    if (this.isViewChecked) {
      if (this.isExpanded) {
        this.hide();
      } else {
        this.show();
      }
    }

....

}

[bevbomb]

Hey @duki994
Sorry for the late reply! You are completely right :) i probably wouldn't have picked this up until using it in a live situation, I'll add your update in now.

[rodrigoic23]

Hello, any update on this?

[ParisZX]

Hi, there is a pure css workaround to the collapse animation. I'm using something like this:

.collapse {
  /* setup transition however you like */
  -webkit-transition: max-height 0.5s ease;
  -moz-transition: max-height 0.5s ease;
  -o-transition: max-height 0.5s ease;
  -ms-transition: max-height 0.5s ease;
  transition: max-height 0.5s ease;
  
  /* override display, overflow and visibility */
  display: block!important;
  overflow: hidden!important;
  visibility: visible!important;
  
  max-height: 0;
  
  &.in {
    /* set max-height to something high so that
    it can fit whatever you have inside your collapsible tag.
    Not too high though, because the animation time will be based
    on this value, so if it's too high the animation will be 
    very fast */
    max-height: 1000px;
  }
}

[Domainv]

https://valor-software.com/ngx-bootstrap/#/collapse#animated