Angular 4 同时进行多个动画

Question

我正在尝试将我的Web应用从AngularJS迁移到Angular 4，但在动画方面遇到了一些问题。对于“Google Images”类型的视图，当单击项目时，有两个需要同时发生的动画;一个div需要增加其margin-bottom，并且该div的子元素需要逐渐出现，使用ngIf和其高度的过渡。这两个动画分别工作，但如果我将这两个动画放在各自的元素上，只有第一个动画起作用。

我制作了一个最小化的plunker来演示我的意思: https://plnkr.co/edit/27EFz3h16icnh3qDzQbY?p=preview

const animationTiming = '1s ease';
@Component({
  selector: 'my-app',
  animations: [
    trigger('expand',
      [
        state('expanded', style({"margin-bottom": '392px'})),
        state('collapsed', style({"margin-bottom": '0'})),
        transition('* => *', animate(animationTiming))
      ]),
    trigger('visibility',
      [
        transition(
          ':enter', [
            style({'height': '0'}),
            animate(animationTiming, style({'height': '*'}))
          ]
        ),
        transition(
          ':leave', [
            style({'height': '*'}),
            animate(animationTiming, style({'height': '0'}))
          ]
        )
      ])
    ]
  template: `
    <button (click)="toggle()">click</button><br/>
    <div class="container" [@expand]="expanded?'expanded':'collapsed'">
      something here
      <div class="detail" [@visibility] *ngIf="expanded">something else in here</div>
    </div>
    <div class="container">something else</div>
  `,
})
export class App {
  expanded: boolean = false;
  toggle() {
    this.expanded = !this.expanded;
  }
}

如果您点击按钮，应该发生的是新内容在“something here”和“something else”之间扩展。实际上发生的是，两个框架按预期移开，但新内容立即弹出。如果我从第一个div中删除[@expand]动画，则新内容确实逐渐从无中生有，但显然两个容器div不会为其腾出空间。

有什么诀窍可以使这些动画同时工作吗？

- Christoph

---

我已经将这种行为报告为错误，因为我找不到任何合理的解释为什么会发生这种情况。问题可以在 https://github.com/angular/angular/issues/18794 找到。 - Christoph

Answer 1

我不确定为什么会出现这个错误，但如果您像这样更改模板，它就可以正常工作：

<button (click)="toggle()">click</button><br/>
<div class="container" [@expand]="expanded?'expanded':'collapsed'">
something here</div>
<div class="detail" [@visibility] *ngIf="expanded">something else in here</div>
<div class="container">something else</div>

当第二个<div>不是第一个的子级时，这两个动画的行为似乎更好。

您可以更改CSS代码，使

保留在其他

之间（通过删除position: absolute）：

.detail {
  height: 360px;
  display: block;
  border: 1px solid black;
  left: 0px;
  right: 0px;
}

- br.julien