web-dev-qa-db-ja.com

Angular2ng2-ブートストラップ崩壊追加遷移/アニメーション

私はこれを使用しています https://valor-software.com/ng2-bootstrap/#/collapse そして私は高さ0にアニメーション/トランジションを追加したいと思います-自動ですが、私たちはあなたができることを知っています高さ自動にトランジションを追加しません。継続時間のあるslideToggleエフェクトを追加したいと思います。 3日以上解決策を探そうとしました...

これに対する既知の解決策はありますか？

angularcollapseng2-bootstrap
6
ShadowFoOrm

アニメーションはまもなくng2-bootstrap。少し待つ必要があります。

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

プランカーの例

11
yurzui