Angular Animations : 如何在模板中动态绑定动画触发器名称?
Angular Animations : How to bind animation trigger name dynamically in the template?
想知道有没有办法在模板中动态绑定动画触发名称
这是要在模板中设置动画的 div 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,那么在模板中我将呈现以下内容:
<div [@myTriggerName]>
...
</div>
因此触发器名称为 myTriggerName 的动画将能够 运行.
我遇到了与发布的问题类似的问题,到目前为止,我使用 ngSwitch 和 ngSwitchCase 作为解决方法,因为在尝试和错误之后我无法进行变量绑定。我不认为下面的例子是最佳解决方案,因为如果我想将触发器名称切换为一百会很乏味,但是它现在对我有用,在 运行 时间内更改触发器名称,希望有还有其他更好的主意,希望对您有所帮助
<div [ngSwitch]="child.animationName" >
<input *ngSwitchCase="flyInOut" [@flyInOut]="'in'" ...>
<input *ngSwitchCase="fadeIn" [@fadeIn]="'in'" ...>
<input *ngSwitchDefault [@flyRotateInOut]="'in'" ...>
</div>
我从中吸取教训后post。看起来使用多个状态比使用触发器名称更容易,所以我改变了我的代码结构如下,下面是原始的post供您参考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))),
])
]
})
想知道有没有办法在模板中动态绑定动画触发名称
这是要在模板中设置动画的 div 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,那么在模板中我将呈现以下内容:
<div [@myTriggerName]>
...
</div>
因此触发器名称为 myTriggerName 的动画将能够 运行.
我遇到了与发布的问题类似的问题,到目前为止,我使用 ngSwitch 和 ngSwitchCase 作为解决方法,因为在尝试和错误之后我无法进行变量绑定。我不认为下面的例子是最佳解决方案,因为如果我想将触发器名称切换为一百会很乏味,但是它现在对我有用,在 运行 时间内更改触发器名称,希望有还有其他更好的主意,希望对您有所帮助
<div [ngSwitch]="child.animationName" >
<input *ngSwitchCase="flyInOut" [@flyInOut]="'in'" ...>
<input *ngSwitchCase="fadeIn" [@fadeIn]="'in'" ...>
<input *ngSwitchDefault [@flyRotateInOut]="'in'" ...>
</div>
我从中吸取教训后post。看起来使用多个状态比使用触发器名称更容易,所以我改变了我的代码结构如下,下面是原始的post供您参考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))),
])
]
})