Javascript 有角度的2个空动画Don'；不要在移动时开火

如何在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);
  }
}

一切正常，从列表中删除项目，向列表中添加项目，在…中添加动画，除非删除项目，否则将删除列表项目而不添加动画。有什么见解吗

这似乎是安格拉尔再次出现的问题，但就我所见，没有人真的有一个好的解决方案

---

例如，本文：

您还需要定义

void

的结束

状态

：

state（'void'，style（{transform:'translateX（100%），不透明度：0}））

然后删除

样式（{transform:'translateX（-100%）}），

行在

*=>void

转换中

或者我会用我认为更容易理解的形式来写：

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=>*

的缩写。

我不知道您是否仍然需要解决方案，但您可以将动画设置为host为true，对于更干净的代码，您可以定义void state和not*（默认）的样式，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），如另一个答案中所述

---

我遇到了完全相同的问题，并且找到了这个解决方案。希望有帮助。：）

看起来原版应该有效（在文档中）：我试过你的例子，行为是不变的