Angular动画：style()函数仅识别驼峰式命名的CSS属性？

在Angular动画的state间定义transition时，transition接收的数组里，第三个style函数期望应用'background-color': 'red'样式，但Angular仅在使用驼峰式命名backgroundColor: 'red'时才会生效。不过在animation的state中，使用引号声明的'background-color'却能正常工作，请问这是Bug还是预期行为？

问题代码片段 #

动画声明完整代码：

animations: [
  trigger('numberEnteredState', [
    state(
      'unselected',
      style({
        border: '1px solid black',
        padding: '5px',
      })
    ),
    state(
      'selected',
      style({
        border: '2px solid blue',
        padding: '4px',
        'background-color': 'lightblue',
      })
    ),
    transition('unselected => selected', [
      style({
        border: '2px solid black',
        padding: '4px',
      }),
      animate('3000ms'),
      style({
        'background-color': 'red', // 此处不生效
      }),
      animate('3000ms'),
    ]),
  ]),
],

state中正常工作的style代码：

state(
  'selected',
  style({
    border: '2px solid blue',
    padding: '4px',
    'background-color': 'lightblue', // 此处正常生效
  })
),

结论：这是预期行为 #

Angular动画对两种场景下的style函数处理逻辑不同：

• state中的style：对应元素的最终状态样式，会被解析为标准CSS属性，因此同时支持带引号的短横线命名（如'background-color'）和驼峰式命名（如backgroundColor）。
• transition序列中的style：属于动画中间关键帧的样式设置，Angular会通过DOM元素的style属性直接操作（类似原生JS的element.style.backgroundColor），因此必须使用DOM属性的驼峰式命名，短横线命名无法被正确识别。

修正后的代码 #

将transition中style的属性改为驼峰式即可生效：

transition('unselected => selected', [
  style({
    border: '2px solid black',
    padding: '4px',
  }),
  animate('3000ms'),
  style({
    backgroundColor: 'red', // 改用驼峰式命名
  }),
  animate('3000ms'),
]),

内容的提问来源于Stack Exchange，提问作者blablaalb