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

所以你可以这样做：

<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

因此，非ngIf触发的

[@Animation]

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

我想在两个窗格上有一个旋转木马效果，但我只剩下css动画边距

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

而

*ngIf

动画和路由器动画的行为就好像它们在播放到结束时就不存在了。（当然，直到下一个触发事件）

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

角度：

可以像这样创建状态动画

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

触发器（'fade'[
状态（'hello'，样式（{opacity:0}）），
状态（'world'，样式（{opacity:1}）），
过渡（“hello world”，动画（“275ms缓进缓出”））
]);

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

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

如果

myVar='hello'

，您将没有不透明度，如果它等于

'world'

，您将有不透明度