0

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 ?

Community
  • 1
  • 1
Morgan
  • 476
  • 9
  • 23

1 Answers1

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>
A. Radulescu
  • 77
  • 3
  • I tried something similar but it does not work properly. When I click on the right button, it works well, but this is the only case. When I click on the left button, the middle panel move the left and expand on its right. When I click a second time on the right, my panel is displayed before the animation ends, and shows a little time on a second row, because the middle panel is still in 'col-md-9' – Morgan Dec 14 '16 at 16:41