transitionlink

使用说明link

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

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

      
        content_copy
      
      <!-- 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.

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

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

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.

语法范例link

Syntax exampleslink

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

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

      
        content_copy
      
      // 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))
    

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

Special values for state-change expressionslink

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

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

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

• 任意两个状态之间的变更：

  Capture a state change between any states:

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

• 进场和立场时的转场动画：

  Entry and exit transitions:

      
        content_copy
      
      transition(":enter", [
  style({ opacity: 0 }),
  animate(500, style({ opacity: 1 }))
  ]),
transition(":leave", [
  animate(500, style({ opacity: 0 }))
  ])
    

• 使用 :increment 和 :decrement 来开始转场：

  Use :increment and :decrement to initiate transitions:

      
        content_copy
      
      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%' }))
 ])
]))
    

状态变更函数link

State-change functionslink

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

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

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

把动画播放到最终状态link

Animating to the final statelink

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

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.

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

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:

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

逻辑值匹配link

Boolean value matchinglink

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

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:

      
        content_copy
      
      // 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))
])