带bootstrap的Angular2动画

Question

我有一个分成3列的行，上面有2个按钮，用来隐藏左右面板：

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

当我点击left按钮时，我希望中间的面板占据左边剩下的所有空间：

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

当我点击右键时，右边的行为也是一样的。如果我两者都点击，我的中间面板应该会占据所有的空间。

当我在div上切换类时(例如，=> -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>