Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular ngx-bootstrap collapse is not animated

I'm using angular 5 and ngx-bootstrap, so when I tried to add a collpase, by following the collapse docs , I got a working example but without animation ( the collapsed dissepears and appears instantly without effects).

So is there a way to show the animation?

like image 404
Abdennacer Lachiheb Avatar asked Mar 25 '18 21:03

Abdennacer Lachiheb


4 Answers

This could be a solution for the whole project.

.collapse {
    transition: all 0.3s ease-out;
    display: block !important;
    overflow: hidden !important;
    max-height: 0;
}

.collapse.in {
    transition: all 0.5s ease-in;
    max-height: 9999px; /*any number which is lager than a height of any of your elements*/
}
like image 111
Oleg Polezky Avatar answered Sep 21 '22 08:09

Oleg Polezky


In my case I just added [isAnimated]="true" as it's shown in https://valor-software.com/ngx-bootstrap/#/collapse#animated

<div id="collapseBasic" [collapse]="isCollapsed" [isAnimated]="true"> ...
like image 43
Stanislav Avatar answered Sep 23 '22 08:09

Stanislav


The following answer is for ngb versionn 5.x.x

If you want to animate the [ngbCollapse] directive

use the code in your component's scss file and modify the following scss as per your requirement:

.collapse {
  transition: transform .35s, opacity .35s, max-height .9s ease-out;
  opacity: 0;
  max-height: 0;
  // transform: translateY(100%);
  display: block !important;

  &.show {
    opacity: 1;
    max-height: 600px;
    // transform: translateY(0);
  }
}

or if you are using CSS : use the below-mentioned code:

.collapse {
  transition: transform .35s, opacity .35s, max-height .9s ease-out;
  opacity: 0;
  max-height: 0;
  // transform: translateY(100%);
  display: block !important;

}

.collapse.show {
  opacity: 1;
  max-height: 600px;
  // transform: translateY(0);
}
like image 36
Parth Developer Avatar answered Sep 25 '22 08:09

Parth Developer


I had same issue and I resolve it by some css trick. It worked for me. I'm hoping that it would work for you. I happens because ngx-bootstrap doesn't use the ".collapsing" class so I done some changes in my code.

#your_nav{
    display: block !important;
    max-height: 1px !important;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
#your_nav.show{
    max-height: 230px !important;
}
like image 31
Irfan Avatar answered Sep 22 '22 08:09

Irfan