deepthan/blog-angular

Angular transition()用法

deepthan opened this issue · 0 comments

transition:状态之间转换处理函数

function transition(
            stateChangeExpr: string, 
            steps: AnimationMetadata | AnimationMetadata[], 
            options: AnimationOptions | null = null
         ):AnimationTransitionMetadata;
  • stateChangeExpr : string

    A=>B,状态转换表达式,即从哪个状态切换到哪个状态。支持以下写法:

    1. 状态改变时启动动画
     transition("void => *", animate(500))
    
    1. 可以在两个状态变化上运行相同动画
    transition("void <=> *", animate(500)),
    
    1. 也可以定义几对状态切换执行同一动画
     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))