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