Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Angular transition()用法 #20

Open
deepthan opened this issue Jan 24, 2018 · 0 comments
Open

Angular transition()用法 #20

deepthan opened this issue Jan 24, 2018 · 0 comments

Comments

@deepthan
Copy link
Owner

deepthan commented Jan 24, 2018

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)) 
@deepthan deepthan changed the title transition()用法 Angular transition()用法 Jun 16, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant