3

我正在尝试将我的 webapp 从 AngularJS 移植到 Angular 4，但我遇到了一些动画问题。对于“Google 图片”类型的视图，我有两个动画需要在单击项目时同时发生；一个 div 需要增加其底部边距，并且该 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;
  }
}

如果您单击该按钮，应该会发生的情况是新内容在“这里的东西”和“其他东西”之间展开。实际发生的是，两个框架按预期相互远离，但新内容立即弹出。如果我从第一个 div 中删除 [@expand] 动画，新内容确实会逐渐从无到有，但显然两个容器 div 并没有为它腾出空间。

有什么技巧可以让这些动画同时工作吗？

4

1 回答 1

0

我不确定为什么会发生此错误，但是如果您像这样更改模板，它会起作用：

<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>当第二个不是第一个的子 div时，两个动画的行为似乎效果更好。

您可以更改 css 代码，使 div 保持在其他代码之间（通过删除position: absolute）：

.detail {
  height: 360px;
  display: block;
  border: 1px solid black;
  left: 0px;
  right: 0px;
}
于 2017-12-06T15:10:05.110 回答