Angular transition()用法
deepthan opened this issue · 0 comments
deepthan commented
transition:状态之间转换处理函数
function transition(
stateChangeExpr: string,
steps: AnimationMetadata | AnimationMetadata[],
options: AnimationOptions | null = null
):AnimationTransitionMetadata;
-
stateChangeExpr : string
A=>B,状态转换表达式,即从哪个状态切换到哪个状态。支持以下写法:
- 状态改变时启动动画
transition("void => *", animate(500))
- 可以在两个状态变化上运行相同动画
transition("void <=> *", animate(500)),
- 也可以定义几对状态切换执行同一动画
transition("on => off, off => void", animate(500)),
-
steps :AnimationMetadata
animate(),动画执行步骤,即几秒执行完,执行曲线是怎样的。
如animate('100ms ease-in')
或是一个数组[animate('100ms ease-in'),animate(600)]
-
options: AnimationOptions
可以传入动画的延迟值和动画输入参数,以更改计时数据和样式。详见
AnimationOptions
函数。
用法
其实状态 transition("void => *", animate(500))
表示的是进入,在这里可以用 :enter
表示:
transition(":enter", animate(500))
同理 transition(" *=> void", animate(500))
离开可以这样写:
transition(":leave", animate(500))