Angular 4动画state样式为何不支持前缀？添加animation-delay报错求解

一、解决TS1005语法错误 #

你遇到的TS1005错误，核心原因是把不属于state样式对象的属性放进去了。state的style()方法只接受纯CSS键值对，而transition是Angular动画的专用配置项，不能写在style里；另外animation-delay也不应该直接放在state的样式中，要通过animate()方法来配置。

错误代码的问题点：

state('visible', style({ left: '0', transition: '650ms ease-in-out', }))

这里的transition是Angular动画的过渡逻辑配置，不属于CSS样式范畴，所以TypeScript会抛出语法错误。

正确的写法应该把过渡时长、延迟和缓动效果放在transition()方法的animate()参数里：

// 定义两种状态的基础样式
state('visible', style({ left: '0' }));
state('hidden', style({ left: '-100%' }));

// 配置双向过渡，包含2秒延迟和动画参数
transition('hidden <=> visible', animate('650ms ease-in-out 2s'));

这里的2s就是动画延迟时间，直接写在animate()的字符串参数里，格式遵循[动画时长] [缓动效果] [延迟时间]的规则。

二、浏览器前缀兼容问题 #

Angular的动画引擎会自动处理浏览器前缀，完全不需要你手动在style()里添加-moz-、-webkit-这类前缀。当你编写标准CSS属性时，Angular会根据当前运行的浏览器，自动注入对应的前缀样式，比如：

state('visible', style({ transform: 'translateX(0)' }))

Angular会自动为Firefox生成-moz-transform，为Chrome生成-webkit-transform等，无需手动干预即可实现多浏览器兼容。

内容的提问来源于stack exchange，提问作者Aman