Angular2 ng2-bootstrap collapse hinzufügen Übergang/Animation

Question

Ich benutze diese https://valor-software.com/ng2-bootstrap/#/collapse und ich möchte eine Animation/Übergang auf Höhe 0 hinzufügen - Auto aber wir alle wissen, dass Sie Übergang auf Höhe Auto nicht hinzufügen können. Ich möchte ein SlideToggle Effect mit einer Dauer hinzufügen. versucht, nach einer Lösung für mehr als 3 Tage zu suchen ...

gibt es eine bekannte Lösung dafür?

Answer 1

Animation kommt bald in ng2-bootstrap. Sie müssen nur ein bisschen warten.

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

1) Heute werden Sie als Abhilfe die folgende nutzen können: a

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

Siehe auch Plunker Example

2) Ohne die CollapseDirective Richtlinie arbeiten, können Sie Mach es so

@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