Search code examples
angulartransformangular-animations

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


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?


Solution

  • 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