带有引导程序的Angular2动画

Posted 2023-05-08

【中文标题】带有引导程序的Angular2动画

【英文标题】：Angular2 animation with bootstrap

【发布时间】：2017-04-30 01:13:42

【问题描述】：

我有一行分为 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动画可以吗？

【参考方案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>

【讨论】：

我尝试了类似的方法，但无法正常工作。当我单击右键时，它运行良好，但这是唯一的情况。当我单击左侧按钮时，中间面板向左移动并在其右侧展开。当我第二次点击右侧时，我的面板在动画结束之前显示，并在第二行显示一点时间，因为中间面板仍在'col-md-9'