Issue
Hi i'm trying to create a angular component with parameters being passed in for the angular animation and I'm receiving a set of errors stating that the parameter is empty. I haven't been able to work out whether I can pass parameters this way (I couldn't locate the documentation for this).
The animation that I have is :
animations: [
trigger('openClose', [
state(
'open',
style({
opacity: 1,
transform: 'scale(1)',
})
),
state(
'closed',
style({
opacity: 0,
transform: 'scale(0.8)',
})
),
transition('closed => open', [
animate('{{ openTransitionDuration }} {{ openTransitionTimingFunction }}', style({ transform: 'scale(1)', opacity: 1 }))
]),
transition('open => closed', [
animate('{{ closeTransitionDuration }} {{ closeTransitionTimingFunction }}', style({ transform: 'scale(0.8)', opacity: 0 }))
]),
]),
trigger('prevNext', [
state(
'true',
style({
opacity: 1,
})
),
state(
'false',
style({
opacity: 0,
})
),
transition('false => true', [
animate('{{ leftTransitionDuration }} {{ leftTransitionTimingFunction }}', style({}))
]),
transition('false => true', [
animate('{{ rightTransitionDuration }} {{ rightTransitionTimingFunction }}', style({}))
]),
]),
trigger('imageAnimation', [
transition('* => *', [
style({ opacity: 0, transform: 'scale(0.8)' }),
animate(
'{{ openTransitionDuration }} {{ openTransitionTimingFunction }}',
style({ opacity: 1, transform: 'scale(1)' })
)
]),
]),
],
I'm passing the parameters as :
@Input() openTransitionDuration: string = '4s';
@Input() openTransitionTimingFunction: string = 'ease-in';
@Input() openTransitionName: string = 'animate__fadeIn';
@Input() closeTransitionDuration: string = '4s';
@Input() closeTransitionTimingFunction: string = 'ease-out';
@Input() closeTransitionName: string = 'animate__fadeOut';
@Input() leftTransitionDuration: string = '4s';
@Input() leftTransitionTimingFunction: string = 'ease-in';
@Input() leftTransitionName: string = 'animate__fadeOutLeft';
@Input() rightTransitionDuration: string = '4s';
@Input() rightTransitionTimingFunction: string = 'ease-in';
@Input() rightTransitionName: string = 'animate__fadeOutRight';
To test this out I'm just using the defaults as above when I declare the @Input statements.
in ngOnint I have console logged the variables and it showing the values. However, I'm receiving the following error :
ERROR Error: NG03402: Unable to process animations due to the following failed trigger transitions NG03505: @imageAnimation has failed due to: NG03003: Please provide a value for the animation param openTransitionDuration
- NG03003: Please provide a value for the animation param openTransitionTimingFunction
- NG03000: The provided timing value " " is invalid.
As you can see above openTransitionDuration and openTransitionTimingFunction are both initialised. So I cannot work work out why the animation is failing.
Solution
When you define an animation with params don't forget add in your trigger a params by defect. e.g. with a simple animation that use as params "width"
animations:[
trigger('custom',[
transition('*=>*', [
style({ width: `{{width}}` }), //<--this is a "param"
animate('500ms ease-in', style({ width: `100%` })),
],{params:{ width: "0"}}), //<---see that "params" is an object
//that have a property "width"
])
]
Answered By - Eliseo
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.