transition

Declares an animation transition as a sequence of animation steps to run when a given condition is satisfied. The condition is a Boolean expression or function that compares the previous and current animation states, and returns true if this transition should occur. When the state criteria of a defined transition are met, the associated animation is triggered.

声明一个转场动画,以便在满足给定条件时运行一系列动画步骤。该条件是一个逻辑型表达式或一个函数, 该函数比较以前和现在的动画状态,如果应该开始转场则返回 true。 当满足所定义的转场动画的状态标准时,就会开始执行相关的动画。

transition(stateChangeExpr: string | ((fromState: string, toState: string, element?: any, params?: { [key: string]: any; }) => boolean), steps: AnimationMetadata | AnimationMetadata[], options: AnimationOptions | null = null): AnimationTransitionMetadata

参数

stateChangeExpr

A Boolean expression or function that compares the previous and current animation states, and returns true if this transition should occur. Note that "true" and "false" match 1 and 0, respectively. An expression is evaluated each time a state change occurs in the animation trigger element. The animation steps run when the expression evaluates to true.

一个逻辑表达式或一个函数,该函数用来比较以前和现在的动画状态,如果应该开始转场,则返回 true。注意,"true" 和 "false" 分别对应于 1 和 0。 在动画触发器所在的元素中,每当状态发生变化时该表达式都会求值一次。 当该表达式求值为真时,则执行这些动画步骤。

  • A state-change string takes the form "state1 => state2", where each side is a defined animation state, or an asterix (*) to refer to a dynamic start or end state.

    一个 "state1 => state2" 格式的状态变更字符串,每一侧都是一个事先定义好的动画状态,或者用星号(*)来动态获取起始或结束状态。

    • The expression string can contain multiple comma-separated statements; for example "state1 => state2, state3 => state4".

      该表达式字符串可以包含多个逗号分隔的状态,比如 "state1 => state2, state3 => state4"。

    • Special values :enter and :leave initiate a transition on the entry and exit states, equivalent to "void => " and " => void".

      特殊值 :enter 表示进入此状态时的转场,等价于 "void => ",:leave 表示退出此状态时的转场,等价于 " => void"。

    • Special values :increment and :decrement initiate a transition when a numeric value has increased or decreased in value.

      特殊值 :increment:decrement 表示数字型值增加或减小时的转场。

  • A function is executed each time a state change occurs in the animation trigger element. The animation steps run when the function returns true.

    一个函数,每当动画触发器所在的元素发生了状态变化时就会执行。 当该函数返回 true 时,就会执行这些动画步骤。

steps

One or more animation objects, as returned by the animate() or sequence() function, that form a transformation from one state to another. A sequence is used by default when you pass an array.

一个或多个由 animate()sequence() 函数返回的动画对象,用于描述从一个状态到另一个状态的转变过程。 当传入一个数组时,默认当做一个动画序列使用。

options

An options object that can contain a delay value for the start of the animation, and additional developer-defined parameters. Provided values for additional parameters are used as defaults, and override values can be passed to the caller on invocation.

一个配置对象,可以包含一个开始动画之前的延迟值,和一些由开发人员定义的参数。在这些参数中提供的值会被用作样式的默认值, 在调用时调用者可以重写这些值。

可选. 默认值是 null.

返回值

AnimationTransitionMetadata: An object that encapsulates the transition data.

一个封装了转场数据的对象。

使用说明

The template associated with a component binds an animation trigger to an element.

与组件关联的模板会把动画触发器绑定到某个元素上。

<!-- somewhere inside of my-component-tpl.html --> <div [@myAnimationTrigger]="myStatusExp">...</div>

All transitions are defined within an animation trigger, along with named states that the transitions change to and from.

所有转场动画以及用于供转场动画使用的命名状态,都是在动画触发器中定义的,

trigger("myAnimationTrigger", [ // define states state("on", style({ background: "green" })), state("off", style({ background: "grey" })), ...]

Note that when you call the sequence() function within a group() or a transition() call, execution does not continue to the next instruction until each of the inner animation steps have completed.

注意,当你在 group()transition() 中调用 sequence() 函数时,除非其内部动画步骤已经执行完了, 否则不会继续执行后续步骤。

Syntax examples

语法范例

The following examples define transitions between the two defined states (and default states), using various options:

下面的例子中定义了一些在两个已定义状态(和默认状态)之间的转场动画,使用了多种选项:

// Transition occurs when the state value // bound to "myAnimationTrigger" changes from "on" to "off" transition("on => off", animate(500)) // Run the same animation for both directions transition("on <=> off", animate(500)) // Define multiple state-change pairs separated by commas transition("on => off, off => void", animate(500))

Special values for state-change expressions

状态变更表达式的一些特殊值

  • Catch-all state change for when an element is inserted into the page and the destination state is unknown:

    当元素插入到页面中,并且目标状态未知时的所有状态变更:

transition("void => *", [ style({ opacity: 0 }), animate(500) ])
  • Capture a state change between any states:

    任意两个状态之间的变更:

    transition("* => *", animate("1s 0s"))

  • Entry and exit transitions:

    进场和立场时的转场动画:

transition(":enter", [ style({ opacity: 0 }), animate(500, style({ opacity: 1 })) ]), transition(":leave", [ animate(500, style({ opacity: 0 })) ])
  • Use :increment and :decrement to initiate transitions:

    使用 :increment:decrement 来开始转场:

transition(":increment", group([ query(':enter', [ style({ left: '100%' }), animate('0.5s ease-out', style('*')) ]), query(':leave', [ animate('0.5s ease-out', style({ left: '-100%' })) ]) ])) transition(":decrement", group([ query(':enter', [ style({ left: '100%' }), animate('0.5s ease-out', style('*')) ]), query(':leave', [ animate('0.5s ease-out', style({ left: '-100%' })) ]) ]))

State-change functions

状态变更函数

Here is an example of a fromState specified as a state-change function that invokes an animation when true:

下面的例子把 fromState 指定为状态变更函数,当它返回 true 时就会执行动画:

transition((fromState, toState) => { return fromState == "off" && toState == "on"; }, animate("1s 0s"))

Animating to the final state

把动画播放到最终状态

If the final step in a transition is a call to animate() that uses a timing value with no style data, that step is automatically considered the final animation arc, for the element to reach the final state. Angular automatically adds or removes CSS styles to ensure that the element is in the correct final state.

如果转场动画的最后一步是调用 animate(),并且只传入时序参数却不带样式数据,则该步骤会被自动当做动画弧的终点, 以便让该元素达到最终状态。 Angular 会根据需要自动添加或移除 CSS 样式,以确保该元素处于正确的最终状态。

The following example defines a transition that starts by hiding the element, then makes sure that it animates properly to whatever state is currently active for trigger:

下面的例子定义了一个转场动画,它先隐藏该元素,然后确保它可以正确设置到触发器处于激活状态时的动画:

transition("void => *", [ style({ opacity: 0 }), animate(500) ])

Boolean value matching

逻辑值匹配

If a trigger binding value is a Boolean, it can be matched using a transition expression that compares true and false or 1 and 0. For example:

如果触发器的绑定值是逻辑型的,它就可以使用一个与 truefalse 或 1、0 进行比较的转场表达式进行匹配。例如:

// in the template <div [@openClose]="open ? true : false">...</div> // in the component metadata trigger('openClose', [ state('true', style({ height: '*' })), state('false', style({ height: '0px' })), transition('false <=> true', animate(500)) ])