How to use Angular animations sequence() method to trigger animation only after one finishes?

Question

I have two elements on the page that I want to animate sequentially.

1. h1 tag
2. the background image

My component's html template looks like this:

`<div class="container">
  <h1 [@flyInOut]="isIn ? 'in' : 'out'"  class="welcome-title">WELCOME</h1>
</div>
<div [@flyInOut]="isIn ? 'in' : 'out'"  class="background">  <div class="gradient">
    <div class="container">
        <div style="height: 350px;"></div>        
    </div>    
  </div>
</div>`

I have the following animation:

`animations: [
    trigger('flyInOut', [
      state('in', style({ transform: 'translateX(0)'})),
      transition(':enter', [
        style({
          transform: 'translateY(-3%)',
          opacity: 0,
          position: 'static'
        }),
        sequence([          
          animate(
            '3.5s ease-in-out',
            keyframes([
              style({ transform: 'translateY(50%)', opacity: 0 }),
              style({ transform: 'translateY(0%)', opacity: 1 }),
            ])
          ),
          animate('2.5s .2s ease-in', keyframes([
            style({ opacity: .0, offset: .2 }),
            style({ opacity: .2, offset: .6 }),
            style({ opacity: .4, offset: .8 }),
            style({ opacity: .99, offset: 1 })
          ]))
        ])  
      ])
    ]),`

All I am looking to do is simply run the first animate function, only THEN run the second animate function. According to angular docs, I should be able to accomplish this with the sequence method, but this is not the case.

What I am seeing is that the given code, will execute both animations in parallel and once it has finished doing the first animation it will then trigger the second animation.

I have a feeling its something with how I am using the animations in the HTML template. Any recommendations?

Yury Polubinsky · Accepted Answer · 2019-04-09T12:02:47.073

2

You can use Animation callbacks.

Just add in your h1 tag

<h1 [@flyInOut]="isIn ? 'in' : 'out'" (@flyInOut.done)="animationDone($event)" class="welcome-title">WELCOME</h1>

and for div use new flag, e.g.:

<div [@flyInOut]="isDivIn ? 'in' : 'out'" class="background"> <div class="gradient">

which you can set to true in animationDone function:

animationDone(event: AnimationEvent) { this.isDivIn = true; //or false, depends on your specific logic }

so, as soon as h1 animation is done, your flag(isDivIn) will be set as true and div animation begin.

edited Apr 09 '19 at 12:02

answered Apr 09 '19 at 11:59

Yury Polubinsky

375
1
10

1

And this makes perfect sense. But I thought the sequence method is supposed to take care of that for you. As I was reading the docs it made sense that this would indeed happen. But if anything ill use that as the fall back mechanism. I just want to see if someone can explain why sequence is not working. – O.MeeKoh Apr 09 '19 at 12:01

score -1 · Answer 2 · answered Apr 25 '20 at 02:39

You need to query you elements and then apply sequence. Something like this:

@Component({
  host: {'[@flyInOut]': ''}
  animations: [
    trigger('flyInOut', [
      query('.container', '.background', [
        style({transform: 'translateY(-3%)', opacity: 0, position: 'static'}),
        sequence([
          animate('3.5s ease-in-out', keyframes([
            style({ transform: 'translateY(50%)', opacity: 0 }),
            style({ transform: 'translateY(0%)', opacity: 1 }),])),
          animate('2.5s .2s ease-in', keyframes([
            style({ opacity: .0, offset: .2 }),
            style({ opacity: .2, offset: .6 }),
            style({ opacity: .4, offset: .8 }),
            style({ opacity: .99, offset: 1 })]))
        ])
      ])
    ])
  ]
})

How to use Angular animations sequence() method to trigger animation only after one finishes?

2 Answers2