Angular 2 animations style function in state vs transition vs animate

Question

I'm very confused. What is the difference between the style() function inside a state()

state('inactive', style({
   backgroundColor: '#eee',
   transform: 'scale(1)'
 })),

and a style() function inside transition()

 transition('inactive => *', [
    style({ transform: 'scale3d(.3, .3, .3)' }),
    animate(100)
 ]),

and a style() function inside animation()

 animate(100, style({ transform: 'scale3d(.0, .0, .0)' }))

Answer 1

This is what the Angular Animations documentation says about it :

1. style() inside state()

These state definitions specify the end styles of each state. They are applied to the element once it has transitioned to that state, and stay as long as it remains in that state. In effect, you're defining what styles the element has in different states.

So these styles defined inside a state are the ones before and after the animation, at some given state.

2. style() inside transition()

You can also apply a style during an animation but not keep it around after the animation finishes. You can define such styles inline, in the transition.

These styles are applied only during the animation time.

3. style() inside animate()

animate specifies an animation step that will apply the provided styles data for a given amount of time based on the provided timing expression value.

The styles given inside animate will take some specific time to get applied during the animation