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

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

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

然后移除style({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 => *的简写。

Answer 2

我不知道你是否还需要一个解决方案，但你可以将动画设置为主机为真，而对于更清晰的代码你可以定义无效状态的样式而不是*（默认），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 =＆gt; ）和（ =＆gt; void）转换的别名，它们分别是（：enter）和（：leave），如另一个所提到的那样答案。

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

Angular 2 Void动画不要开火移除

2 个答案: