如何根据变量有条件地动画转换？ （Angular 动画）

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()
    }
  };