Javascript 如果满足条件，则设置角度动画

我有一个角度应用程序中的动画

@Component({
  selector: 'app-portfolio',
  templateUrl: 'portfolio.page.html',
  styleUrls: ['portfolio.page.scss'],
  animations: [
    trigger('slideInOut', [
      transition(':enter', [
        style({transform: 'translateY(-100%)'}),
        animate('200ms ease-in', style({transform: 'translateY(0%)'}))
      ]),
      transition(':leave', [
        animate('200ms ease-in', style({transform: 'translateY(-100%)'}))
      ])
    ])
  ]
})

但是，有两个元素在同一位置使用它，它们不能同时出现在屏幕上。因此，如果我选择显示一个元素，那么另一个元素将自动隐藏。问题是，如果其他元素没有在中设置动画，我只希望该元素设置动画。是否有方法仅在满足条件时显示动画？像这样的

  <ion-item color="primary" (element2open === false)=[@slideInOut] *ngIf="openElement1" lines="none">
  </ion-item>
  <ion-item color="primary" (element1open === false)=[@slideInOut] *ngIf="openElement2" lines="none">
  </ion-item>

---

解决方案1:

可以使用以下方法禁用动画：

  @HostBinding('@.disabled')
  public animationsDisabled = false;

这将为您的组件设置css类：

ng animate disabled

请参见切换复选框“切换所有动画”的示例

解决方案2: 为了避免动画同时进出，可以使用以给定顺序运行动画

trigger('slideInOut', [
  transition('* => *', [
    sequence([
      query(':enter', [
        style({transform: 'translateY(-100%)'}),
        animate('200ms ease-in', style({transform: 'translateY(0%)'}))
      ], {optional: true}),
      query(':leave', [
        animate('200ms ease-in', style({transform: 'translateY(-100%)'}))
      ], {optional: true})
    ])
  ])
])

这将运行第一个动画进入和第二个动画离开。如果需要相反的顺序，请更改数组中的顺序

确保使用

@slideInOut

注释父项，而不是项元素

<parent @slideInOut>
  <ion-item color="primary"  *ngIf="openElement1" lines="none">
  </ion-item>
  <ion-item color="primary" *ngIf="openElement2" lines="none">
  </ion-item>
</parent>

你能设置stackblitz并快速设置密码吗？@MichaelRennison我已经添加了一些额外的信息