I have this simple animation:
trigger('slide', [
state(
'true',
style({
transform: 'transform: translateX(0px) translateZ(0px)',
opacity: 1,
}),
),
state('false', style({ transform: 'translateX(100%) translateZ(0px)', opacity: 0 })),
transition('* => *', animate(200)),
]),
which I use on my menu component like this:
[@slide]="isExpanded"
It works, but chrome has this warning:
Invalid keyframe value for property transform: transform: translateX(0px) translateZ(0px)
Does anyone know why?
This was me being silly, the first transform is wrong:
transform: 'transform: translateX(0px) translateZ(0px)',
It has an extra transform which isn't needed. Changing it to this:
animations: [
trigger('slide', [
state(
'true',
style({
transform: 'translateX(0px) translateZ(0px)',
opacity: 1,
}),
),
state('false', style({ transform: 'translateX(100%) translateZ(0px)', opacity: 0 })),
transition('* => *', animate(200)),
]),
],
Fixed the issue