Angular 状态 vs 转换 vs 动画中的 2 个动画样式函数

Question

我很困惑。 state()

中的 style() 函数有什么区别

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() 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.

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

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.

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

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.

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

Angular 状态 vs 转换 vs 动画中的 2 个动画样式函数

Angular 2 animations style function in state vs transition vs animate

javascript

angular

angular-animations