transitionlink
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
。 当满足所定义的转场动画的状态标准时,就会开始执行相关的动画。
参数
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. 一个逻辑表达式或一个函数,该函数用来比较以前和现在的动画状态,如果应该开始转场,则返回
|
steps | One or more animation objects, as returned by the 一个或多个由 |
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. 一个配置对象,可以包含一个开始动画之前的延迟值,和一些由开发人员定义的参数。在这些参数中提供的值会被用作样式的默认值, 在调用时调用者可以重写这些值。 可选. 默认值是 |
返回值
AnimationTransitionMetadata
: An object that encapsulates the transition data.
一个封装了转场数据的对象。
使用说明
The template associated with a component binds an animation trigger to an element.
与组件关联的模板会把动画触发器绑定到某个元素上。
All transitions are defined within an animation trigger, along with named states that the transitions change to and from.
所有转场动画以及用于供转场动画使用的命名状态,都是在动画触发器中定义的,
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:
下面的例子中定义了一些在两个已定义状态(和默认状态)之间的转场动画,使用了多种选项:
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:
当元素插入到页面中,并且目标状态未知时的所有状态变更:
Capture a state change between any states:
任意两个状态之间的变更:
transition("* => *", animate("1s 0s"))
Entry and exit transitions:
进场和立场时的转场动画:
Use
:increment
and:decrement
to initiate transitions:使用
:increment
和:decrement
来开始转场:
State-change functions
状态变更函数
Here is an example of a fromState
specified as a state-change function that invokes an animation when true:
下面的例子把 fromState
指定为状态变更函数,当它返回 true
时就会执行动画:
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:
下面的例子定义了一个转场动画,它先隐藏该元素,然后确保它可以正确设置到触发器处于激活状态时的动画:
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:
如果触发器的绑定值是逻辑型的,它就可以使用一个与 true
、false
或 1、0 进行比较的转场表达式进行匹配。例如: