I have a transition between states. The transition receives an array and the third item in the array is the style function that should apply 'background-color' : 'red'. For some reason Angular doesn't apply the style unless I declare it with camel case: backgroundColor: 'red'.
Is this a bug or it's expected behavior?

Here's the project on stackblitz

Here's the code snippet of declared animations:

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

The same style() function with css property declared within quotation marks works just fine inside the animation state:

      state(
        'selected',
        style({
          border: '2px solid blue',
          padding: '4px',
          'background-color': 'lightblue',
        })
      ),

CodePudding user response：

As @Naveen stated - Documentation:

Use the style() function to define a set of styles to associate with a given state name. You must use camelCase for style attributes that contain dashes, such as backgroundColor or wrap them in quotes, such as 'background-color'

Updated:

However, when you define a background-color property in the initial state it seems to recognize that in the transition -> styles. This is very inconsistent behavior. This does seem like a bug.

https://stackblitz.com/edit/angular-ivy-e4xvwg?file=src/app/app.component.html,src/app/app.component.ts

trigger('numberEnteredState', [
      state(
        'unselected',
        style({
          border: '1px solid black',
          padding: '5px',
          'background-color': 'white',
        })
      ),
      state(
        'selected',
        style({
          border: '2px solid blue',
          padding: '4px',
          'background-color': 'lightblue',
        })
      ),
      transition('unselected => selected', [
        style({
          border: '2px solid green',
          padding: '4px',
        }),
        animate('3000ms'),
        style({
          'background-color': 'red',
        }),
        state(
          'selected',
          style({
            border: '2px solid blue',
            padding: '4px',
            backgroundColor: 'lightblue',
          })
        ),
        animate('3000ms'),
      ]),
    ]),
  ],