Angular 2 - 5 个动画但没有 *ngIf

Question

所以你可以这样做:

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

但是如果您想要的是与 angular 动画完全相同的行为但不使用 *ngIf

怎么办

因此 [@Animation] 由 ngIf

以外的东西触发

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

我想在两个窗格上产生旋转木马效果，但我只能使用 css-动画左边距。

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

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

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

Answer 1

Angular 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'，则有不透明度。

Angular 2 - 5 个动画但没有 *ngIf

Angular 2 - 5 animations but WITHOUT *ngIf

angular

angular-animations