属性 变换的关键帧值无效：变换：angular 动画中的 transform: translateX(0px) translateZ(0px)

Question

我有这个简单的动画：

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)),
]),

我在菜单组件上使用的是这样的：

 [@slide]="isExpanded"

有效，但 chrome 有此警告：

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

有人知道为什么吗？

Answer 1

这是我在犯傻，第一个转换是错误的：

transform: 'transform: translateX(0px) translateZ(0px)',

它有一个不需要的额外 transform。 将其更改为：

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)),
    ]),
],

已解决问题