Angular animation with:leave/:enter 似乎只在頁面重新加載時執行某些操作

Question

我想我快要有一個可用的 angular animation 了，但現在它沒什么作用:(

這里是

trigger("fadeInOut", [
  transition("* => *", [
    query(":enter", [style({ opacity: 0 })], { optional: true }),
    query(
      ":leave",
      [style({ opacity: 1 }), animate("2s", style({ opacity: 0 }))],
      { optional: true }
    ),
    query(
      ":enter",
      [style({ opacity: 0 }), animate("2s", style({ opacity: 1 }))],
      { optional: true }
    )
  ])
])

添加/刪除時只是簡單的淡入/淡出（我認為）。 這是 HTML

<main @fadeInOut class="container">
    <div *ngIf="state">State is true</div>
    <div *ngIf="!state">State is false</div>
</main>

堆棧閃電戰

如您所見，切換 state 將顯示不同的div元素，但不會顯示 animation。如果您重新加載，您會看到漂亮的淡入效果。

我試圖將@fadeInOut * 放在div上，但這沒有幫助。 所以一定有一些我不了解的東西transition和/或query 。 任何指導將不勝感激！

Answer 1

我認為您想要的是transition而不是query 。 下面是修改后的 angular 動畫代碼：

trigger("fadeInOut", [
  transition(':enter', [
    style({ opacity: 0 }),
    animate('2s', style({ opacity: 1 })),
  ]),
  transition(':leave', [
    animate('2s', style({ opacity: 0 })),
  ]),
])

你可以將這些動畫直接應用到div而不是它的父級

<main class="container">
    <div *ngIf="state" @fadeInOut>State is true</div>
    <div *ngIf="!state" @fadeInOut>State is false</div>
</main>

Answer 2

也許我找到了解決方案，但我認為答案“Angular Animations are designed for elements being added or removed from the DOM”是正確的。

開始采取@William Juan 的解決方案

有點 CSS：

1. Position class.container 作為相對
2. 子項（2 個 div）是絕對的，具有給定的上 - 左 - ...值（重疊效果的相同值）

在您的 .ts 文件中，使用延遲：

  trigger("fadeInOut", [
    transition(':enter', [
      style({ opacity: 0 }),
      animate('1s 1s',  style({ opacity: 1 })),
    ]),
    transition(':leave', [
      animate('1s', style({ opacity: 0 })),
    ]),
  ])

這將產生淡入淡出的印象。