ng-bootstrap crash：如何应用动画？

我正在使用折叠：https://ng-bootstrap.github.io/#/components/collapse https://ng-bootstrap.github.io/#/components/collapse

然而，它并没有动画；即使不在演示网站上。我应该如何实现这个？

我认为这是一个很好的方法，它对于揭示和折叠都有效：（尽管它不再需要 ng-bootstrap 了）

模板.html：

<button (click)="isCollapsed = !isCollapsed">Toggle</button>
<p [@smoothCollapse]="isCollapsed?'initial':'final'">
    your data here
</p>

.

组件.ts：

import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'app-my-component',
  templateUrl: './template.html',
  styleUrls: ['./style.scss'],
  animations: [
    trigger('smoothCollapse', [
      state('initial', style({
        height:'0',
        overflow:'hidden',
        opacity:'0'
      })),
      state('final', style({
        overflow:'hidden',
        opacity:'1'
      })),
      transition('initial=>final', animate('750ms')),
      transition('final=>initial', animate('750ms'))
    ]),
  ]
})
export class MyComponent ...

Details:

• 初始高度：0 允许从零开始
• 不指定最终高度让元素在全部显示后停止增长
• 溢出：隐藏在任何地方，这样你的元素就不会在其他元素上运行
• 不透明度从 0 到 1 使其更好（在我看来）
• 我花了一些时间才意识到的一件重要的事情是NOT put [ngbCollapse]="isCollapsed" in the <p>否则它会破坏所有动画。我们不需要它，因为我们将高度设置为 0

希望对你有帮助，我花了一天的时间：P