如何根据变量有条件地为过渡设置动画？ （角度动画）

Question

我有以下动画

  animations: [
    trigger('someAnimation', [
      state('inactive', style({ opacity: 0 })),
      state('active', style({ opacity: 1 })),
      state('removed', style({ opacity: 0 })),
      transition(
        'inactive => active',
        animate('{{ variable }}')
      ),
      transition(
        'active => removed',
        animate('{{ secondVariable ? secondVariable : variable }}') // not working, just an example
      )
    ])
  ],

还有这个主机绑定：

  @HostBinding('@someAnimation')
  state = {
    value: 'inactive',
    params: {
      variable: this.getVariable(),
      secondVariable: this.getSecondVariable()
    }
  };

因此，如果第二个变量未定义或没有我想要的值，我会尝试退回第一个变量。

你知道我怎样才能实现这样的目标吗？ animate('{{ secondVariable ? secondVariable : 变量 }}')

PS：这是我第一次在 Angular 中使用动画，我已经阅读了几篇文章并检查了文档，但还没有找到类似的东西。

提前致谢！

Answer 1

实际上，我只需要在初始化变量时定义回退，而不是在动画内部。

像这样：

  @HostBinding('@someAnimation')
  state = {
    value: 'inactive',
    params: {
      variable: this.getVariable(),
      secondVariable: this.getSecondVariable() ? this.getSecondVariable() : this.getVariable()
    }
  };