Question

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

然而，它没有动画;甚至不在演示网站上。我应该如何实现这个？

Answer 1

因为他们使用＆＃34; display：none＆＃34;隐藏和＆＃34;显示：阻止＆＃34;要显示元素，您无法应用＆＃34;过渡＆＃34; 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

您可以在组件内部添加以下内容：

 animations: [
    trigger('expandCollapse', [
                state('open', style({height: '100%', opacity: 1})),
                state('closed', style({height: 0, opacity: 0})),
                transition('* => *', [animate('100ms')])
            ]),
 ]


 <div [ngbCollapse]="isCollapsed" [@expandCollapse]="isCollapsed ? 'closed' : 'open'"> ... </div>

在此处https://angular.io/guide/animations#animating-a-simple-transition

查看更多详细信息

Answer 3

我认为，这是一种很好的方法，它可以用于显示和折叠：（尽管它实际上不再需要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

Answer 4

我仅使用bootstrap类创建了一条指令，该指令仅使用angular-animation来执行相同的原始bootstrap效果，请检查一下！

Live example

指令代码

import {Directive, ElementRef, HostBinding, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
import {animate, AnimationBuilder, AnimationPlayer, keyframes, style} from '@angular/animations';

@Directive({
  selector: '[appCollapseAnimated]'
})
export class CollapseAnimatedDirective implements OnChanges, OnInit {
  private static readonly SHOW_STYLE = 'show';
  private static readonly COLLAPSING = 'collapsing';

  @Input('appCollapseAnimated')
  collapsed = true;

  @Input()
  skipClosingAnimation = false;

  @HostBinding('class.collapse')
  private readonly addCollapseClass = true;

  private currentEffect: AnimationPlayer;
  private _closeEffect: AnimationPlayer;
  private _openEffect: AnimationPlayer;

  constructor(private el: ElementRef,
              private builder: AnimationBuilder) {

  }

  ngOnInit(): void {
    if (!this.collapsed) {
      this.getClassList().add(CollapseAnimatedDirective.SHOW_STYLE);
    }
  }

  private get openEffect(): AnimationPlayer {
    if (!this._openEffect) {
      this._openEffect = this.builder.build(animate('500ms', keyframes([
        style({height: '0'}),
        style({height: '*'}),
      ]))).create(this.el.nativeElement);
    }
    this._openEffect.onDone(() => this.effectDone());
    return this._openEffect;
  }


  private get closeEffect(): AnimationPlayer {
    if (!this._closeEffect) {
      this._closeEffect = this.builder.build(animate('500ms', keyframes([
        style({height: '*'}),
        style({height: '0'}),
      ]))).create(this.el.nativeElement);
    }
    this._closeEffect.onDone(() => this.effectDone());
    return this._closeEffect;
  }

  private effectDone() {
    if (this.collapsed) {
      this.getClassList().remove(CollapseAnimatedDirective.SHOW_STYLE);
    }
    this.getClassList().remove(CollapseAnimatedDirective.COLLAPSING);
    if (this.currentEffect) {
      this.currentEffect.reset();
      this.currentEffect = null;
    }
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.collapsed && !changes.collapsed.firstChange) {
      if (changes.collapsed.previousValue === true && changes.collapsed.currentValue === false) {
        this.startOpening();
      }
      if (changes.collapsed.previousValue === false && changes.collapsed.currentValue === true) {
        this.startClosing();
      }
    }
  }

  private startOpening(): void {
    this.getClassList().add(CollapseAnimatedDirective.SHOW_STYLE);
    const effect = this.openEffect;
    this.playEffect(effect);
  }

  private getClassList() {
    const nativeElement = this.el.nativeElement as HTMLElement;
    return nativeElement.classList;
  }

  private startClosing(): void {
    const effect = this.closeEffect;
    if (this.skipClosingAnimation) {
      this.effectDone();
    } else {
      this.playEffect(effect);
    }
  }

  private playEffect(effect: AnimationPlayer) {
    if (!this.currentEffect) {
      this.getClassList().add(CollapseAnimatedDirective.COLLAPSING);
      this.currentEffect = effect;
      this.currentEffect.play();
    }
  }
}

在模板中使用它：

<button class="btn btn-primary" (click)="collapsed = !collapsed">
  Toggle
</button>
<div [appCollapseAnimated]="collapsed" class="beautiful-div border border-secondary mt-5">
  this should collapse with the default bootstrap behaviour
</div>

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

4 个答案: