angular 4 simultaneous animations

Question

I'm trying to port my webapp from AngularJS to Angular 4, and I'm having some issues with animations. For a "Google Images" type of view, I have two animations that need to happen simultaneously when an item is clicked; one div needs its margin-bottom to increase, and a child of that div needs to gradually appear, using ngIf and a transition on its height. Both animations work separately, but if I put both animations on their respective elements, only the first one works.

I've made a minimal plunker to demonstrate what I mean: 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;
  }
}

If you click the button, what should happen is that the new content expands in between "something here" and "something else". What actually happens is that the two frames move away from each other as expected, but the new content just pops up immediately. If I remove the [@expand] animation from the first div, the new content does gradually grow out of nothing but obviously the two container divs don't make room for it.

Is there a trick to make these animations work simultaneously?

I've reported this behavior as a bug because I can't find any reasonable explanation for why this is happening. Issue can be found at https://github.com/angular/angular/issues/18794 — Christoph, Aug 22 '17 at 07:44

score 0 · Answer 1 · answered Dec 06 '17 at 15:10

I am not sure why this error occurs, but it works if you change your template like this :

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

The behaviour of the two animations seems to work better, when the second <div> is not a sub-div of the first one.

And you can change the css code so the div stays between the other ones (by removing position: absolute) :

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

angular 4 simultaneous animations

1 Answers1