Angular 2 动画风格函数的状态 vs 过渡 vs 动画

Question

我很困惑。style()a 里面的函数有什么区别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 动画文档对此是这么说的：

1. state() 中的 style()

这些状态定义指定每个状态的结束样式。一旦元素转换到该状态，它们就会应用于元素，并且只要元素保持在该状态，它们就会一直保留。实际上，您正在定义元素在不同状态下具有的样式。

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

2.transition()内的style()

您还可以在动画期间应用样式，但在动画完成后不要保留它。您可以在过渡中内​​联定义此类样式。

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

3. animate() 中的 style()

animate 指定一个动画步骤，该步骤将根据提供的计时表达式值在给定的时间内应用提供的样式数据。

animate 内部给出的样式将需要一些特定的时间才能在动画过程中应用