使用主机绑定设置Angular动画参数

Question

我一直在尝试使用@HostBinding装饰性设置动画参数，但似乎不起作用，我想念的是什么

animations: [
    trigger('animateMe', [
      state('void', style({ opacity: 0 })),
      transition(':enter, :leave', [ // void <=> *
        animate('{{ easeTime}}ms {{ transitionTimingFn }}')
      ])
    ])
  ]

和主机绑定

@HostBinding('@animateMe') state = {
    value: 'void',
    params: {
      easeTime: 5000
    }
  };

Answer 1

如果将getter函数添加到主机绑定属性，则可以设置动画参数。

trigger: any;
easingTime = 5000;

@HostBinding('@animateMe') 
get fn() {
    return {
        value: this.trigger,
        params: {
            easeTime: this.easingTime
        }
    }
};

Answer 2

不幸的是，这不起作用，因为动画是在组件实际生成之前创建的（此代码位于 @Component 元数据中）。

类之外的任何代码都不会在同一范围内。

另外，我不确定，但我不会想到你可以使用 @HostBinding 绑定到动画，相反，你可以使用动画回调，如下所示：

  <ul>
    <li *ngFor="let hero of heroes"
        (@flyInOut.start)="animationStarted($event)"
        (@flyInOut.done)="animationDone($event)"
        [@flyInOut]="'in'">
      {{hero.name}}
    </li>
  </ul>

参考： https: //angular.io/guide/animations#animation-callbacks