Angular 动画：:leave ( * => void) 不工作，因为 :enter (void => *) 正在工作

Question

我是 angular 动画的新手。我担心为什么 :enter 工作得很好。但是 :leave 不起作用。

这是我的代码：

    animations: [
    trigger('fade', [
      transition('void => *', [style({ opacity: 0 }), animate(4000)]),
      transition('* => void', [animate(4000, style({ opacity: 0 }))])
    ])
  ]

我想在 div 元素离开 DOM 时设置动画。

Stackblitz link here

Answer 1

问题是动画链接在内部和 *ngIf 而不是在同一层：

<!-- container with ngIf --> 
<div *ngIf="show">
  <!-- element being animated -->
  <div @fade class="d-flex justify-content-start flex-wrap">
    <!-- other content -->
  </div>
</div>

发生的事情是，当 ngIf 从 false 切换为 true 时，您的动画元素将被渲染并触发动画。

当ngIf从true切换到false时，div上没有动画被销毁，所以Angular不处理任何，并销毁（从DOM) 元素。它里面的所有东西都会被立即处理掉，所以动画不会触发（或者在删除的 DOM 元素的天堂里触发，没人能看到它，但我跑题了）。

要解决您的问题，只需将 @fade 与 *ngIf 放在同一元素上即可。

Angular 动画：:leave ( * => void) 不工作，因为 :enter (void => *) 正在工作

Angular animation: :leave ( * => void) not working as :enter (void => * ) is working

angular

angular-animations