Question

我正在使用angular 5和ngx-bootstrap，所以当我尝试添加一个collpase时，通过跟随折叠docs，我得到了一个有效的例子，但是没有动画（折叠的分散并且立即显示没有效果）。

那么有没有办法展示动画？

Answer 1

我有同样的问题，我通过一些css技巧解决它。它对我有用。我希望它对你有用。我发生了因为ngx-bootstrap没有使用＆＃34; .collapsing＆＃34;所以我在代码中做了一些更改。

#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;
}

Answer 2

以下答案适用于ngb版本5.x.x

如果要为[ngbCollapse]指令设置动画

使用组件的scss文件中的代码，并根据需要修改以下scss：

.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);
  }
}

，或者如果您使用的是CSS ：使用下面的代码：

.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);
}

Answer 3

这可能是整个项目的解决方案。

.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*/
}

Answer 4

就我而言，我刚刚添加了[isAnimated] =“ true”，如https://valor-software.com/ngx-bootstrap/#/collapse#animated所示

<div id="collapseBasic" [collapse]="isCollapsed" [isAnimated]="true"> ...

Angular ngx-bootstrap折叠不是动画的

4 个答案: