CODEWITHSUNDEEP
angularangular-animations
r3plica
r3plica

Reputation: 13367

Angular Trigger animation on class addition

I want to modify an animation I have. Currently it's set to this:

animations: [
  trigger('crossFade', [
    transition(':enter', [
      style({ opacity: 0 }), //<--state before enter animation begins
      animate('1000ms', style({ opacity: 1 })), //<--animate to get opacity 1 in 1000ms
    ]),
    transition(':leave', [animate('1000ms', style({ opacity: 0 }))]), //<--animate to get opacity 0 in 1000ms
  ]),
],

As you can see, it starts when the component is added to the DOM (:enter) and then when the component is removed from the DOM (:leave)

My HTML looks like this:

<div class="background-image" situ-background-image [publicId]="section.backgroundImage.publicId"
    *ngIf="section.backgroundImage.publicId && !backgroundImage?.publicId" [@crossFade]>
</div>
<div class="background-image" situ-background-image [publicId]="backgroundImage.publicId"
    *ngIf="backgroundImage?.publicId" [@crossFade]>
</div>

This works fine when the image is removed from the DOM, but not when the image first loads and this is because the image hasn't actually loaded yet. So I changed my html to this:

<div class="background-image" situ-background-image [publicId]="section.backgroundImage.publicId"
    [class.loaded]="loaded[section.backgroundImage.publicId]"
    (onLoaded)="loaded[section.backgroundImage.publicId] = true"
    *ngIf="section.backgroundImage.publicId && !backgroundImage?.publicId" [@crossFade]>
</div>
<div class="background-image" situ-background-image [publicId]="backgroundImage.publicId"
    [class.loaded]="loaded[backgroundImage.publicId]" (onLoaded)="loaded[backgroundImage.publicId] = true"
    *ngIf="backgroundImage?.publicId" [@crossFade]>
</div>

As you can see, I add a loaded class to the element when the image has loaded. Once this class has been applied, that is when I want the animation to fire. The leave animation is fine.

Does anyone know how I can do that?

Upvotes: 0

Views: 620

Answers (1)

r3plica
r3plica

Reputation: 13367

Figured it out; I changed my animation to this:

animations: [
  trigger('crossFade', [
    state('false', style({ opacity: 0 })),
    state('true', style({ opacity: 1 })),
    transition('false <=> true', animate('1000ms')),
    transition(':leave', [animate('1000ms', style({ opacity: 0 }))]), //<--animate to get opacity 0 in 1000ms
  ]),
],

And updated my html to this:

<div class="background-image" situ-background-image [publicId]="section.backgroundImage.publicId"
    (onLoaded)="loaded[section.backgroundImage.publicId] = true"
    *ngIf="section.backgroundImage.publicId && !backgroundImage?.publicId"
    [@crossFade]="loaded[section.backgroundImage.publicId] ? 'true' : 'false'">
</div>
<div class="background-image" situ-background-image [publicId]="backgroundImage.publicId"
    (onLoaded)="loaded[backgroundImage.publicId] = true" *ngIf="backgroundImage?.publicId"
    [@crossFade]="loaded[backgroundImage.publicId] ? 'true' : 'false'">
</div>

Upvotes: 1

Related Questions