带有引导程序的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）。 现在，我希望它具有动画效果并具有平稳的过渡。 我尝试按照以下响应进行操作：对引导列进行动画处理，但是我不想使用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>