带有引导程序的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>