Angular 2 Void 动画不会在删除时触发

Question

如何在 Angular2 中删除 dom 元素时触发动画？

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormControl, Validators } from "@angular/forms";

import {
  trigger,
  state,
  style,
  animate,
  transition
} from '@angular/animations';

import { ServerService } from './server.service';

@Component({
  selector: 'fc-server',
  templateUrl: './server.component.html',
  animations: [
  trigger('flyInFlyOut', [
    state('*', style({transform: 'translateX(0)', opacity: 1})),
    transition('void => *', [
      style({transform: 'translateX(-100%)', opacity: 0}),
      animate('400ms ease')
    ]),
    transition('* => void', [
      style({transform: 'translateX(-100%)'}),
      animate('400ms ease')
    ])
  ])
  ]
})
export class Server {

  @Input() serverInstance;

  serverForm;

  constructor(
    private serverService: ServerService) {}

  ngOnInit() {
    this.serverForm = new FormGroup({
      serverName: new FormControl('', Validators.required),
      serverPort: new FormControl('', Validators.required),
      serverIp: new FormControl('', Validators.required),
    });
  }


  @Output() remove = new EventEmitter();

  onRemove() {
    this.serverService.remove(this.serverInstance);
  }

  onSubmit(serverInstance) {
    this.serverService.add(serverInstance);
  }
}

一切正常，从列表中删除项目，将项目添加到列表中，动画...除了删除项目时，列表项目被删除，没有动画。有什么见解吗？

这似乎是 Angular2 反复出现的问题，但据我所知，没有人真正有好的解决方案。

比如这篇文章：https://www.bennadel.com/blog/3140-using-changedetection-with-animation-to-setup-dynamic-void-transitions-in-angular-2-rc-6.htm

Answer 1

您还需要定义void 的结尾state：

state('void', style({transform: 'translateX(100%)', opacity: 0}))

然后删除* => void 转换中的style({transform: 'translateX(-100%)'}), 行。

或者在我看来，我会把它写成更容易理解的形式：

trigger('flyInFlyOut', [
  transition(':enter', [
    // the element receives this style immediately and then animates to the 
    // next style which is the `style({ transform: 'translateX(0)', opacity: 1 })`
    style({ transform: 'translateX(-100%)', opacity: 0 }),
    animate('300ms', style({ transform: 'translateX(0)', opacity: 1 })),
  ]),
  transition(':leave', [
    style({ transform: 'translateX(0)', opacity: 1 }),
    animate('200ms', style({ transform: 'translateX(100%)', opacity: 0 })),
  ]),
]);

:leave 和 :enter 分别是 * => void 和 void => * 的简写。

Answer 2

我不知道你是否还需要一个解决方案，但你可以将动画设置为 true，并且为了更简洁的代码，你可以定义 void 状态的样式而不是 *（默认），角度足够聪明，知道如何最终样式应如下所示，例如：

@Component({
  selector: 'fc-server',
  templateUrl: './server.component.html',
  animations: [
  trigger('flyInFlyOut', [
    state('void', style({transform: 'translateX(-100%)', opacity: 0})),
    transition('void => *', [
      animate('400ms ease')
    ]),
    transition('* => void', [
      animate('400ms ease')
    ])
  ])
  ],
  host: {
    '[@flyInFlyOut]': 'true'
  }
})

此外，如果您想为 (void => ) 和 ( => void) 转换使用别名，它们分别是 (:enter) 和 (:leave) ，如另一个答案中所述。

我遇到了同样的问题并找到了这个解决方案。希望能帮助到你。 :)