Angular Animations:如何在模板中动态绑定动画触发器名称? [英] Angular Animations : How to bind animation trigger name dynamically in the template?
问题描述
我想知道是否可以在模板中动态绑定动画触发器名称.
I would like to know if there is a way to bind the animation trigger name dynamically in the template.
这是要在模板 app.component.html 中设置动画的div:
Here is the div to animate in the template app.component.html:
<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 ,则在模板中将呈现此内容:
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>
因此触发名称为 myTriggerName 的动画就可以运行.
And so the animation whose trigger name is myTriggerName would be able to run.
推荐答案
.看起来使用多个状态比使用触发器名称更容易,所以我像下面那样更改我的代码结构,下面是供您参考的原始帖子 https://angularfirebase.com/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/
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屋!