Angular ngx-bootstrap 折叠不是动画

Question

我正在使用 angular 5 和 ngx-bootstrap，所以当我尝试添加一个 collpase 时，通过遵循 collapse docs ，我得到了一个工作示例，但没有动画（折叠消失并立即出现，没有效果）。

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

Answer 1

我有同样的问题，我通过一些 css 技巧解决了它。它对我有用。我希望它对你有用。我碰巧是因为 ngx-bootstrap 没有使用“.collapsing”class 所以我对我的代码做了一些更改。

#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

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

.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 3

The following answer is for ngb versionn 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 4

在我的例子中，我只是添加了 [isAnimated]="true"，如 https://valor-software.com/ngx-bootstrap/#/collapse#animated

中所示

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

Angular ngx-bootstrap 折叠不是动画

Angular ngx-bootstrap collapse is not animated

animation

collapse

ngx-bootstrap

angular

angular5