angular - 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');
  }
}

実用的なプランカーの例も参照してください

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;
}

プランカーの例