CODEWITHSUNDEEP
htmlangulartypescript
Tom
Tom

Reputation: 4033

Angular Animations increment & decrement trigger won't trigger

I'm currently trying to implement a slider with different animations according to what button (prev or next) is clicked.

Before I tried to add the triggers :increment & :decrement (without groups and queries) the animation worked, but just solely one way.

Now that I'm trying to add both animation directions, I tried the following - the images are being changed, but without animation:

animations: [
    trigger('slideInOut', [
      transition(':increment', group([
        query(':enter', [
          style({
            transform: 'translateX(-200%)',
            filter: 'blur(5px)',
            opacity: 0.7
          }),
          animate('200ms ease-in-out', style({
            transform: 'translateX(0%)',
            filter: 'blur(0px)',
            opacity: 1
          }))
        ]),
        query(':leave', [
          animate('200ms ease-in', style({
            transform: 'translateX(100%)',
            filter: 'blur(2px)',
            opacity: 0.9
          }))
        ])
      ])),
      transition(':decrement', group([
        query(':enter', [
          style({
            transform: 'translateX(200%)',
            filter: 'blur(5px)',
            opacity: 0.7
          }),
          animate('200ms ease-in-out', style({
            transform: 'translateX(0%)',
            filter: 'blur(0px)',
            opacity: 1
          }))
        ]),
        query(':leave', [
          animate('200ms ease-in', style({
            transform: 'translateX(-100%)',
            filter: 'blur(2px)',
            opacity: 0.9
          }))
        ])
      ]))
    ])
  ]
 })

export class FrontComponent implements OnInit {

  image: number = 1;

  increase() {
    this.image = this.image === 1 ? 2 : 1;
  }

  decrease() {
    this.image = this.image === 1 ? 2 : 1;
  }

...

}

<img *ngIf="image === 1" [@slideInOut]="image" src="/assets/images/wrap.png" class="position-absolute w-100" alt="wrap">
<img *ngIf="image === 2" [@slideInOut]="image" src="/assets/images/wrap2.png" class="position-absolute w-100" alt="wrap">

Upvotes: 1

Views: 857

Answers (1)

juana pu
juana pu

Reputation: 161

You need to make sure animation trigger's 'query' gets calculated before the dom tear down, since 'query' is to find inner HTML elements. To do that, you can simply move your animation trigger one level up.

<div [@slideInOut]="image">
  <img *ngIf="image === 1" src="/assets/images/wrap.png" class="position-absolute w-100" alt="wrap">
  <img *ngIf="image === 2" src="/assets/images/wrap2.png" class="position-absolute w-100" alt="wrap">
</div>

stackblitz-angular-animation-transition-increment-demo

Upvotes: 1

Related Questions