this is my component template
<nav class="menu" [ngClass]="{ snap: snap }" [@menuBackground]="'normal'">
<div class="container fluid">
<div class="row align-items-center">
<div class="col-2" [@logoZoomOut]="'normal'">
<img *ngIf="true" src="../../../assets/logo.png" class="logo img-fluid" alt="logo" />
</div>
<div
class="links-wrapper text-right d-none d-md-block col-md-8 offset-md-2 col-lg-6 offset-lg-4 col-xl-5 offset-xl-5"
>
<ul>
<app-menu-link [link]="'/'" [text]="'Home'" [first]="true"></app-menu-link>
<app-menu-link [link]="'/services'" [text]="'Services'"></app-menu-link>
<app-menu-link [link]="'/portfolio'" [text]="'Portfolio'"></app-menu-link>
<app-menu-link [link]="'/contact'" [text]="'Contact'" [contact]="true"></app-menu-link>
</ul>
</div>
</div>
</div>
</nav>
And that's my component code:
import { Component, OnInit, OnDestroy } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.scss'],
animations: [
trigger('menuBackground', [
state('normal', style({ background: 'rgba(118, 137, 169, 0.22)' })),
transition('void => normal', [style({ background: 'none' }), animate('.5s 2s ease-in')])
]),
trigger('logoZoomOut', [
state('normal', style({ transform: 'scale(1)' })),
transition('void => normal', [style({ transform: 'scale(1.5)' }), animate('.5s ease-in')])
])
]
})
export class MenuComponent implements OnInit, OnDestroy {
public snap = false;
constructor() {}
ngOnInit() {
window.addEventListener('scroll', this.scroll, true);
}
ngOnDestroy() {
window.removeEventListener('scroll', this.scroll, true);
}
scroll = (): void => {
if (window.pageYOffset > 90) {
this.snap = true;
} else {
this.snap = false;
}
};
}
And now I want to animate both nav's background and logo size.
But the problem is that when both menuBackground and logoZoomOut triggers are set on nav and div - only background is animated and logo's animation is not played.
When I remove background animation - logo animates properly.
So how can I animate both elements at the same time?
I thought it should work independently. I had also problem with logo animation - it didn't work without *ngIf="true" on img element. Maybe it's somehow related?
