Angular2 ng2-Bootstrap 折叠添加过渡/动画

Question

我正在用这个 https://valor-software.com/ng2-bootstrap/#/collapse 我想在 height 0 - auto 上添加动画/过渡，但我们都知道你不能在 height auto 上添加过渡。 我想添加一个带有持续时间的 slideToggle 效果。 试图寻找超过 3 天的解决方案...

是否有已知的解决方案？

Answer 1

动画即将在 ng2-bootstrap 中推出。您只需要稍等一下。

• https://github.com/valor-software/ng2-bootstrap/blob/v1.1.1/components/collapse/collapse.directive.ts#L23

1) 今天，您可以利用以下解决方法:

@Component({
  selector: 'my-app',
  template: `
       <button type="button" class="btn btn-primary"
           (click)="isCollapsed = !isCollapsed">Toggle collapse
      </button>
      <div (collapsed)="setHeight(el, 0)"
           (expanded)="setHeight(el, 0);setHeight(el, el.scrollHeight)"
           [collapse]="isCollapsed"
           class="card card-block card-header block"  #el>
        <div class="well well-lg">Some content</div>
      </div>
  `,
  styles: [`
    .block {
      display: block !important;
      overflow: hidden !important;
      -webkit-transition: height .5s;
      transition: height .5s;
    }
  `]
})
export class App {
  isCollapsed: boolean = true;

  constructor(private renderer: Renderer) { }

  setHeight(el, height) {
    this.renderer.setElementStyle(el, 'height', height + 'px');
  }
}

另见工作 Plunker Example

2) 如果没有 CollapseDirective 指令，你可以这样做

@Component({
  selector: 'my-app',
  template: `
    <button type="button" class="btn btn-primary"
      (click)="height = height ? 0 : el.scrollHeight">Toggle collapse
    </button>

    <div       
      class="card card-block card-header block" [style.height]="height + 'px'" #el> 
      <div class="well well-lg">Some content</div>
    </div>
  `,
  styles: [`
    .block {
      overflow: hidden;
      -webkit-transition: height .5s;
      transition: height .5s;
    }
  `]
})
export class App {
  height = 0;
}

Plunker Example