Angular Animations：如何在模板中動態綁定動畫觸發器名稱？

Question

我想知道是否可以在模板中動態綁定動畫觸發器名稱。

這是要在模板app.component.html中進行動畫處理的div：

<div [@animationTriggerName]>
  ...
</div>

這是app.module.ts ：

...
@NgModule({
  imports:      [...],
  declarations: [ ..., AnimationTriggerNameDirective ],
  bootstrap:    [...]
})

這是app.component.ts ：

@Component({
  ...
})
export class AppComponent  {
  ...
  animationTriggerName = 'slideInOut';
}

@Directive({
  selector: '[animationTriggerName]'
})
export class AnimationTriggerNameDirective {
  @Input() animationTriggerName: string;
  constructor() {}
}

我希望能夠動態設置變量animationTriggerName 。 因此，如果我將其設置為myTriggerName ，則在模板中將呈現此內容：

<div [@myTriggerName]>
  ...
</div>

這樣，觸發器名稱為myTriggerName的動畫就可以運行。

Answer 1

我有類似的問題，例如發布的問題，到目前為止，由於在嘗試了幾次嘗試和錯誤后無法進行可變綁定，因此我將ngSwitch和ngSwitchCase用作解決方法。 我不認為下面的示例是最佳解決方案，因為如果我想將觸發器名稱切換為100將會很乏味，但是現在對我來說，在運行時更改觸發器名稱非常有用，希望還有其他更好的解決方案想法，希望對您有所幫助

<div [ngSwitch]="child.animationName" >
 <input *ngSwitchCase="flyInOut" [@flyInOut]="'in'"  ...>
 <input *ngSwitchCase="fadeIn" [@fadeIn]="'in'"  ...> 
 <input *ngSwitchDefault [@flyRotateInOut]="'in'" ...>
</div> 

Answer 2

我從這篇文章中學到之后 看起來使用多個狀態比使用觸發器名稱更容易，所以我將代碼結構更改如下，下面是供您參考的原始帖子https://angularfirebase.com/lessons/hammerjs-angular-5-animations-for -mobile-gestures-tutorial /

@Component({
  selector: 'hammer-card',
  templateUrl: './hammer-card.component.html',
  styleUrls: ['./hammer-card.component.sass'],
  animations: [
    trigger('cardAnimator', [
      transition('* => wobble', animate(1000, keyframes(kf.wobble))),
      transition('* => swing', animate(1000, keyframes(kf.swing))),
      transition('* => jello', animate(1000, keyframes(kf.jello))),
      transition('* => zoomOutRight', animate(1000, keyframes(kf.zoomOutRight))),
      transition('* => slideOutLeft', animate(1000, keyframes(kf.slideOutLeft))),
      transition('* => rotateOutUpRight', animate(1000, keyframes(kf.rotateOutUpRight))),
      transition('* => flipOutY', animate(1000, keyframes(kf.flipOutY))),
    ])
  ]
})