Angular Animations:如何在模板中动态绑定动画触发器名称? [英] Angular Animations : How to bind animation trigger name dynamically in the template?

问题描述

我想知道是否有办法在模板中动态绑定动画触发器名称.

这是要在模板 app.component.html 中设置动画的 div:

...

这是app.module.ts:

<预><代码>...@NgModule({进口:[...]，声明: [ ..., AnimationTriggerNameDirective ],引导程序:[...]})

这里是 app.component.ts:

@Component({...})导出类 AppComponent {...animationTriggerName = 'slideInOut';}@指示({选择器:'[animationTriggerName]'})导出类 AnimationTriggerNameDirective {@Input() animationTriggerName: 字符串；构造函数(){}}

我希望能够动态设置变量 animationTriggerName.因此，如果我将其设置为 myTriggerName，那么在模板中我将呈现:

...

这样触发器名称为myTriggerName的动画就可以运行了.

解决方案

在我从这篇文章中学习之后.看起来使用多个状态比使用触发器名称容易得多，所以我改变了我的代码结构，如下所示，下面是供您参考的原始帖子 https://angularfirebase.com/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/

@Component({选择器:'锤卡'，templateUrl: './hammer-card.component.html',styleUrls: ['./hammer-card.component.sass'],动画:[触发器('cardAnimator'，[transition('* => wobble', animate(1000, keyframes(kf.wobble))),过渡('* => 摆动'，动画(1000，关键帧(kf.swing)))，transition('* => jello', animate(1000, keyframes(kf.jello))),过渡('* => zoomOutRight'，动画(1000，关键帧(kf.zoomOutRight)))，过渡('* => slideOutLeft'，动画(1000，关键帧(kf.slideOutLeft)))，过渡('* =>rotateOutUpRight'，动画(1000，关键帧(kf.rotateOutUpRight)))，过渡('* =>flipOutY'，动画(1000，关键帧(kf.flipOutY)))，])]})

I would like to know if there is a way to bind the animation trigger name dynamically in the template.

Here is the div to animate in the template app.component.html:

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

Here is the app.module.ts:

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

And here is the app.component.ts:

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

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

I want to be able to set the variable animationTriggerName dynamically. So if I set it to myTriggerName, then in the template I would have this rendered :

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

And so the animation whose trigger name is myTriggerName would be able to run.

解决方案

after I learn from this post. it looks like use multiple states is much eaiser than using trigger name, so I change my code structure like below, below is the original post for your reference 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))),
    ])
  ]
})

这篇关于Angular Animations:如何在模板中动态绑定动画触发器名称?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！