Angular 2动画样式函数在状态vs过渡与动画

Question

我很困惑。 style()

中state()函数之间的区别是什么？

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

和style()

中的transition()函数

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

和style()

中的animation()函数

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

Answer 1

这是Angular Animations documentation所说的：

<强> 1。 style（）内的style（）

  

这些状态定义指定每个州的结束样式。 他们是   一旦转换到该状态就应用于该元素，并且   只要它保持在那种状态就会保持。实际上，你是在定义   元素在不同状态下的样式。

因此，在状态中定义的这些样式是动画之前和之后的某些状态。

<强> 2。 style（）里面的style（）

  

您还可以在动画期间应用样式，但不要保留它   动画结束后。您可以在内嵌中定义此类样式   转型。

这些样式仅在动画时间应用。

第3。 animate（）中的style（）

  

animate指定将应用提供的动画步骤   根据提供的时间设定给定时间内的数据   表达价值。

动画内部给出的样式在动画期间需要一些特定时间才能应用