Переход

Experimental Function

Класс Экспорт

export transition(stateChangeExpr: string, steps: AnimationMetadata | AnimationMetadata[]) : AnimationStateTransitionMetadata

transition — это функция, специфичная для анимаций, предназначенная для использования в языке анимаций Angular2. Если эта информация для вас нова, пожалуйста, перейдите на страницу метаданных анимаций компонентов, чтобы лучше понять, как используются анимации в Angular2.

transition объявляет последовательность шагов анимации, которые будут выполнены, когда заданное значение stateChangeExpr будет удовлетворено. stateChangeExpr состоит из state1 => state2, который состоит из двух известных состояний (используйте звездочку (*) для указания динамического начального и/или конечного состояния).

Переходы анимаций размещаются внутри триггера анимации. Для того, чтобы анимация перешла в значение состояния и сохранила свои стили, необходимо определить один или несколько состояний анимации.

Использование

Переход анимации инициируется, когда предикат stateChangeExpr принимает значение true, основываясь на предыдущем и текущем состоянии. Другими словами, если определён переход, соответствующий критериям старого/текущего состояния, то будет запущен связанная анимация.

// all transition/state changes are defined within an animation trigger
trigger("myAnimationTrigger", [
  // if a state is defined then its styles will be persisted when the
  // animation has fully completed itself
  state("on", style({ background: "green" })),
  state("off", style({ background: "grey" })),

  // a transition animation that will be kicked off when the state value
  // bound to "myAnimationTrigger" changes from "on" to "off"
  transition("on => off", animate(500)),

  // it is also possible to do run the same animation for both directions
  transition("on <=> off", animate(500)),

  // or to define multiple states pairs separated by commas
  transition("on => off, off => void", animate(500)),

  // this is a 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)
  ]),

  // this will capture a state change between any states
  transition("* => *", animate("1s 0s")),
])

Шаблон, связанный с этим компонентом, будет использовать триггер анимации myAnimationTrigger, привязываясь к элементу в его коде шаблона.

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

Окончательный вызов animate

Если последний шаг в шагах перехода — это вызов animate(), который только использует значение времени без данных стиля, то он автоматически будет использован как конечная дуга анимации для перемещения элемента в конечное состояние. Это включает автоматическую добавление/удаление CSS-стилей, чтобы элемент находился в точном состоянии, необходимом для правильной презентации применённого состояния.

// start off by hiding the element, but make sure that it animates properly to whatever state
// is currently active for "myAnimationTrigger"
transition("void => *", [
  style({ opacity: 0 }),
  animate(500)
])

Псевдонимы перехода (:enter и :leave)

Учитывая, что анимации вставки (вход) и удаления (выход) настолько распространены, функция transition принимает значения :enter и :leave, которые являются псевдонимами для изменений состояния void => * и * => void.

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

Пример (живая демонстрация)

import {Component, NgModule, animate, state, style, transition, trigger} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

@Component({
  selector: 'example-app',
  styles: [`
    .toggle-container {
      background-color:white;
      border:10px solid black;
      width:200px;
      text-align:center;
      line-height:100px;
      font-size:50px;
      box-sizing:border-box;
      overflow:hidden;
    }
  `],
  animations: [trigger(
      'openClose',
      [
        state('collapsed, void', style({height: '0px', color: 'maroon', borderColor: 'maroon'})),
        state('expanded', style({height: '*', borderColor: 'green', color: 'green'})),
        transition(
            'collapsed <=> expanded', [animate(500, style({height: '250px'})), animate(500)])
      ])],
  template: `
    <button (click)="expand()">Open</button>
    <button (click)="collapse()">Closed</button>
    <hr />
    <div class="toggle-container" [@openClose]="stateExpression">
      Look at this box
    </div>
  `
})
export class MyExpandoCmp {
  stateExpression: string;
  constructor() { this.collapse(); }
  expand() { this.stateExpression = 'expanded'; }
  collapse() { this.stateExpression = 'collapsed'; }
}

@NgModule({imports: [BrowserModule], declarations: [MyExpandoCmp], bootstrap: [MyExpandoCmp]})
export class AppModule {
}

экспортировано из @angular/core/index, определено в @angular/core/src/animation/metadata.ts