Invalid keyframe value for property transform: transform: translateX(0px) translateZ(0px) in angular animation

Question

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?

Answer 1

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