Angular 2 - 5 动画，但没有 *ngIf答案

【问题标题】：Angular 2 - 5 animations but WITHOUT *ngIfAngular 2 - 5 动画，但没有 *ngIf
【发布时间】：2020-08-19 09:01:44
【问题描述】：

所以你可以这样做：

<div *ngIf="isDetailsOpen" [@slideRightAnimation] class="inline-carousel">
  <div class="pane">
    <app-filters ></app-filters>
  </div>
  <div  class="pane">
    <app-details></app-details>
  </div>
</div>

但是如果你想要的是与角度动画相同的行为但不使用*ngIf

因此，[@Animation] 由 ngIf 以外的其他东西触发

这个功能对我有用的原因是：拥有集中的动画，不仅适用于出现和消失的元素，也适用于停留在那里的元素。

我想在两个窗格上产生轮播效果，但我只使用 css-animated margin-left 来实现这个效果。

这并不令人满意，因为调整视口的大小会使其重新调整。

而*ngIf 动画和路由器动画的表现就好像它们在播放完成后就不再存在一样。（当然，直到下一个触发事件）。

我想复制它或使用此动画设置，但以另一种方式触发它。

【问题讨论】：

标签： angular angular-animations

【解决方案1】：

角度documentation：

您可以像这样创建状态动画。

trigger('fade', [
  state('hello', style({ opacity: 0 })),
  state('world', style({ opacity: 1 })),
  transition('hello <=> world', animate('275ms ease-in-out'))
]);

在你的 HTML 代码中，你可以这样使用

<div [@fade]="myVar" class="inline-carousel">

如果myVar = 'hello'，则没有不透明度，如果等于'world'，则有不透明度。

【讨论】：