Angular2 애니메이션

Question

나는 오른쪽 및 왼쪽 패널을 숨기려면이 개 버튼을 3 개 열로 나누어 행이 : 나는 왼쪽 버튼을 클릭하면

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>