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 ?

A. Radulescu · Accepted Answer · 2016-12-14 16:18:03Z

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>

answered Dec 14, 2016 at 16:18

A. Radulescu

773 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Morgan Over a year ago

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'

Collectives™ on Stack Overflow

Angular2 animation with bootstrap

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related