Angular2動畫與引導

Question

我有一排3列分，2個按鈕隱藏左，右側面板：

col-md-3  col-md-7  col-md-2 
------------------------------------ 
|   |     |  | 
| left | middle panel |  | <= right panel 
| panel |     |  | 
|   |     |  | 
|   |     |  | 
------------------------------------ 
<<<        >>> 

當我點擊左邊的按鈕，我想我的中間面板採取一切空間留在左邊：

  col-md-10  col-md-2 
------------------------------------ 
|       |  | 
|  middle panel   |  | <= right panel 
|       |  | 
|       |  | 
|       |  | 
------------------------------------ 
<<<        >>> 

和右側相同的行爲，當我點擊右邊的按鈕。 如果我點擊兩者，我的中間面板應該佔據所有空間。

當我在我的div上切換類時（例如col-md-7 => col-md-12），它工作得很好。 現在，我希望它是動畫，平穩過渡。我嘗試了下面的迴應：Animate bootstrap columns 但我不想使用JQuery。 Angular2動畫有可能嗎？

Answer 1

你應該能夠實現與相應的CSS樣式這個效果和* ngIf/[ngClass]面板上：

CSS

.middle-panel { 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

HTML

<div class="left-panel col-md-3" *ngIf="(middleToggled == false)"></div> 

<div class="middle-panel" [ngClass]="{ 'col-md-7' : (! middleToggled), 'col-md-10' : (middleToggled) }"></div> 

<div class="right-panel col-md-2"></div>