角度 2 虚空动画在移除时不会触发

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状态而不是*(默认(的样式，angular足够聪明，可以知道最终样式应该是什么样子，例如：

@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(，如另一个答案中所述。

我遇到了完全相同的问题，并找到了这个解决方案。希望对您有所帮助。:)