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>