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 =＆gt; 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>

带引导程序的Angular2动画

1 个答案: