ng-bootstrap崩溃:如何应用动画？

Question

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

但是,它没有动画; 甚至不在演示网站上.我应该如何实现？

Answer 1

因为他们使用"display:none"来隐藏和"display:block"来显示元素,所以你不能应用"transition"CSS属性.

因此,强制显示块,管理高度和不透明度以切换隐藏/显示:

.collapse, .collapse.in {
  display: block !important;
  transition: all .25s ease-in-out;
}

.collapse {
 opacity: 0;
 height: 0;
}

.collapse.in {
  opacity: 1;
  height: 100%;
}

有了基本的过渡和不透明度/高度,它似乎更加流畅.

您可以使用关键帧制作自己的动画并应用于.collapse.in以获得更好的切换隐藏/显示体验.

然后,如果您在项目中使用Angular 2,则可以切换到ng2-bootstrap:http://valor-software.com/ng2-bootstrap/

Answer 2

我认为这是一个很好的方法，它可以用于显示和折叠：（尽管它实际上不再需要ng-bootstrap了）

template.html：

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

。

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

细节：

• 初始高度：0允许从零开始
• 未指定最终高度时，元素全部显示时将停止增长
• 溢出：到处都隐藏，因此您的元素不会在其他元素上运行
• 从0到1的不透明度使其更好（我认为）
• 我花了一些时间才意识到的重要事情是不要放进[ngbCollapse]="isCollapsed"去，<p>否则会破坏所有动画。而且我们不需要它，因为我们将高度设置为0

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