Angular2 animation with bootstrap

Question

I have a row divided in 3 columns with 2 buttons to hide the right and left panels :

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

When I click on left button, I want my middle panel to take all the space left on the left :

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

And the same behavior on the right, when I click on the right button. If I click on both, my middle panel should take all the space.

It works well when I just switch classes on my div (col-md-7 => col-md-12 for example). Now I would like it to be animated, with a smooth transition. I tried following this response : Animate bootstrap columns But I don't want to use JQuery. Is it possible with Angular2 animation ?

Answer 1

You should be able to achieve this effect with the appropriate CSS styles and *ngIf / [ngClass] on the panels:

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>