Question

Angular 1处理进入，离开和移动动画。 Angular 2文档描述了如何进入和离开动画（void =＆gt; *和* =＆gt; void），但是如何在Angular 2中实现移动动画呢？

Answer 1

如果您还没有，请阅读Angular's official guide for animations。

您可以定义动画状态以及它们之间的过渡。例如：

animations: [
  trigger('heroState', [
    state('inactive', style({
      backgroundColor: '#eee',
      transform: 'scale(1)'
    })),
    state('active',   style({
      backgroundColor: '#cfd8dc',
      transform: 'scale(1.1)'
    })),
    transition('inactive => active', animate('100ms ease-in')),
    transition('active => inactive', animate('100ms ease-out'))
  ])
]

inactive和active可以替换为任意字符串，您可以拥有任意数量的唯一状态，但必须有一个有效的过渡到每个状态，否则动画会赢得＃39发生了。 void是一种特殊情况，表示当元素尚未附加到视图且*是通配符时，适用于已定义状态的任何。

编辑：

嗯......好吧，首先，你可以使用this Sortable library。它声称支持Angular 2并且是纯Javascript（没有jQuery）所以理论上它应该运行良好但我自己没有使用它。

否则，我确信它纯粹可以在Angular 2中使用，但它可能需要一些相当聪明的代码。 transform: translateY()属性很容易实现相对运动（无论组件或元素的特定位置）。问题是Angular 2动画状态仅在组件处于该状态时才适用，所以如果你给它一个translateY（-20px）来将一个元素移动到一个位置，如果你想要它就不会保持该位置想要再次提升它。

请参阅this plunker了解我提出的解决方案。

template: `
  <div #thisElement>
    <div class="div-box" @moveState="state">Click buttons to move <div>
  </div>
  <button (click)="moveUp()">Up</button>
  <button (click)="moveDown()">Down</button>
`,

我为＆＃39; moveUp＆＃39;定义了动画状态。和＆＃39; moveDown＆＃39;在实际动画期间只能应用和静态＆＃39;当组件不移动时应用的状态。

animations: [ trigger('moveState', [ state('moveUp', style({ transform: 'translateY(-30px)'; })), state('moveDown', style({ transform: 'translateY(30px)'; })), state('static', style({ transform: 'translateY(0)'; })), transition('* => moveUp', animate('100ms ease-in')), transition('* => moveDown', animate('100ms ease-out')), transition('* => static', animate('0ms linear')) ]) ]

对于实际启动动画的功能，它会应用＆＃39; moveUp＆＃39;或者＆＃39; moveDown＆＃39; state然后启动超时，在超过转换长度的时间后触发回调。在回调中，它将动画状态设置为＆＃39;静态＆＃39; （转换到＆＃39;静态＆＃39;状态设置为0 ms，因此我们实际上不会将其移动回静态位置）。然后我们使用Renderer将翻译应用到我们希望它最终结束的位置（使用position属性计算，该属性将定义它相对于最初位置的位置，而不是它在数组中的位置）。渲染器将其样式与动画分开应用，因此我们可以应用它们而不会相互冲突。

export class MyComponent { state = 'static'; @ViewChild('thisElement') thisBox: ElementRef; position: number = 0; //... moveUp() { this.state = 'moveUp'; this.position--; setTimeout(() => { this.state = 'static'; this.renderer.setElementStyle(this.thisBox.nativeElement, 'transform', 'translateY(' + String(this.position * 30) + 'px)'); }, 100) } moveDown() { this.state = 'moveDown'; this.position++; setTimeout(() => { this.state = 'static'; this.renderer.setElementStyle(this.thisBox.nativeElement, 'transform', 'translateY(' + String(this.position * 30) + 'px)'); }, 100) } //... }

这只是一个例子，说明如何动画移动而不必为每个可能的位置定义状态。就触发阵列操作的动画而言，你必须自己解决这个问题。。我会使用EventEmitters或Subjects的某种实现来向组件发送事件，然后组件决定是否需要动画。

Angular2移动动画

1 个答案: