Angular2 ng2-bootstrap折叠添加转换/动画

Question

我正在使用这个 https://valor-software.com/ng2-bootstrap/#/collapse ,我想在高度0上添加一个动画/过渡 - 自动但我们都知道你不能在高度自动上添加过渡.我想添加一个持续时间的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示例

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示例