angular - 如何从动画中排除某些元素？

Question

在某些变量的情况下，我有两个元素 - 我正在显示和隐藏它们。我想在这些元素上应用动画。

<button class="button blue save-btn"
(click)="save()" *ngIf="shouldWeOpenAwardTableData ">Save</button>

<div class="row red" *ngIf="showChooseBidsCompoFlag" [@fadeInOut]>
   <h1>i want to animation only here </h1>
</div>

动画看起来像这样

 animations: [
    trigger('fadeInOut', [
      transition(':enter', [   // :enter is alias to 'void => *'
        style({opacity:0}),
        animate(500, style({opacity:1})) 
      ]),
      transition(':leave', [   // :leave is alias to '* => void'
        animate(500, style({opacity:0})) 
      ])
    ])
  ]

但这里的问题是 - 当shouldWeOpenAwardTableData 设置为真时 - 动画应用于两个元素 - 所以按钮和 div。

shouldWeOpenAwardTableData 当设置为真时，我想排除按钮本身的动画。

我怎样才能做到这一点

标签： angularangular-animations