[英]Angular 2 animations style function in state vs transition vs animate
I'm very confused. 我很困惑 What is the difference between the style()
function inside a state()
state()
内部的style()
函数和有什么区别
state('inactive', style({
backgroundColor: '#eee',
transform: 'scale(1)'
})),
and a style()
function inside transition()
和transition()
的style()
函数
transition('inactive => *', [
style({ transform: 'scale3d(.3, .3, .3)' }),
animate(100)
]),
and a style()
function inside animation()
还有animation()
的style()
函数
animate(100, style({ transform: 'scale3d(.0, .0, .0)' }))
This is what the Angular Animations documentation says about it : 这就是Angular Animations文档所说的:
1. style() inside state() 1. state()内的style()
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() 2. style()在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() 3. animate()中的style()
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指定一个动画步骤,该步骤将基于提供的定时表达式值在给定的时间内应用提供的样式数据 。
The styles given inside animate will take some specific time to get applied during the animation 在动画中给定的样式需要花费一些特定的时间才能在动画期间应用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.